/**
 * Yusaso Teal CSS Token Catalog
 *
 * Loaded before all presentation stylesheets. These are the canonical Teal
 * defaults available to Platform UI, Modules, Persona pages and popups.
 * custom.css may override these values for an installed or user-edited Theme.
 * Empirical layout geometry remains in its existing owning stylesheet.
 */

:root {
  /* Core palette */
  --yusaso-blue: #06717d;
  --yusaso-green: #12824b;
  --yusaso-purple: #601e5a;
  --primary-color: #000000;
  --primary-transparent: color-mix(in srgb,var(--primary-color) 90%,transparent);
  --secondary-color: #080808;
  --primary-border-color: #080808;
  --primary-accent-color: #06424d;
  --secondary-accent-color: #00272b;
  --primary-font-color: #ffffff;
  --secondary-font-color: #000000;
  --primary-link-color: #06717d;
  --primary-link-active-color: #4aa2b0;
  --primary-link-hover-color: #22a2b3;
  --gradient-mix: linear-gradient(90deg, rgba(4, 4, 23, 1) 0%, rgba(7, 18, 18, 1) 25%, rgba(10, 5, 20, 1) 50%, rgba(23, 3, 23, 1) 76%, rgba(7, 7, 26, 1) 100%) !important;
  --gradient-mix-header: linear-gradient(90deg, rgba(4, 4, 23, 1) 0%, rgba(7, 18, 18, 1) 25%, rgba(10, 5, 20, 1) 50%, rgba(23, 3, 23, 1) 76%, rgba(7, 7, 26, 1) 100%);
    
  --standard-surface-border-color: var(--primary-border-color);
  --interactive-surface-background-color: var(--primary-color);
  --interactive-surface-background-image: var(--theme-body-background);
  --interactive-surface-border-color: var(--standard-surface-border-color);
  --interactive-surface-hover-border-color: var(--primary-link-hover-color);

  /* Typography */
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.25rem;
  --font-xl: 2rem;
  --font-body-family: Arial, Helvetica, sans-serif;
  --font-heading-family: Arial, Helvetica, sans-serif;
  --font-control-family: Arial, Helvetica, sans-serif;
  --font-body-line-height: 1.5;
  --font-heading-color: #f1f5f9;
  --font-heading-weight: 700;
  --font-h2-size: 1.5rem;

  /* Pages and cards */
  --color-page-bg: #010b0f;
  --color-link: var(--yusaso-blue);
  --link-text-color: #67c7d1;
  --link-hover-color: #8de5ee;
  --font-inactive: #4d8596;
  --page-outer-background: var(--primary-color);
  
  --theme-body-background: var(--primary-color);
  --theme-page-background: var(--primary-color);
  /*
  
  --theme-body-background: linear-gradient(
    90deg,
    rgba(3, 3, 15, 1) 0%,
    rgba(4, 10, 10, 1) 25%,
    rgba(6, 3, 13, 1) 50%,
    rgba(15, 2, 15, 1) 76%,
    rgba(4, 4, 15, 1) 100%
  );
  
 
  
  --theme-page-background: linear-gradient(
    90deg,
    rgba(3, 3, 15, 1) 0%,
    rgba(4, 10, 10, 1) 25%,
    rgba(6, 3, 13, 1) 50%,
    rgba(15, 2, 15, 1) 76%,
    rgba(4, 4, 15, 1) 100%
  );   */
  /* Max Theme image controls: upload or remove page and body artwork. */
  --page-background-image: none;
  --page-background-image-opacity: 1;
  --body-background-image: none;
  --body-background-image-opacity: 1;
  --page-surface: #021f26;
  --page-card-background: #022a33;
  --page-card-text: #f1f5f9;
  --page-card-border: var(--secondary-color);
  --page-card-border-width: 1px;
  --page-card-radius: 12px;
  --page-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  --feature-wrapper-background: linear-gradient(
    135deg,
    rgba(8, 1, 11, 0.92),
    rgba(3, 0, 6, 0.94)
  );
  
  /* --feature-wrapper-border: rgba(155, 107, 211, 0.28); */
  --interior-feature-card-background: rgba(2, 10, 13, 0.3);
  --interior-feature-card-content-background: color-mix(in srgb, var(--primary-color) 50%, transparent);
  --interior-feature-card-content-border: var(--standard-surface-border-color);
  
  /* Shared widget family: applies to widgets on every public page. */
  --widget-background-color: var(--primary-color);
  --widget-header-border: #030303;
  --widget-content-background: color-mix(in srgb, var(--primary-color) 40%, transparent);
  --widget-border-color: transparent;
  --widget-border-width: 0px;
  --widget-header-background-color: var(--primary-color);
  --widget-header-border-color: var(--widget-header-border);
  --widget-content-background-color: var(--widget-content-background);
  --widget-frame-corner-image: none;
  --widget-frame-side-image: none;
  --widget-frame-side-vertical-image: none;
  --content-surface-background-color: var(--persona-popup-background-color);
  --content-surface-background-image: var(--persona-popup-background-image);
  --center-content-glow-inner: #ffffff24;
  --center-content-glow-outer: #ffffff12;
  --page-muted-text: #c7d9d7;
  --page-muted-text-color: var(--page-muted-text);
  --page-text-color: var(--page-card-text);
  --small-font-color: #434254;
  --page-link-color: var(--primary-link-color);
  --page-divider-color: transparent;
  --section-background: transparent;

  /* Tabs and search controls */
  --tab-background-color: transparent;
  --tab-text-color: var(--page-card-text);
  --tab-border-color: var(--page-divider-color);
  --tab-hover-background-color: var(--navigation-hover-background-color);
  --tab-hover-text-color: var(--navigation-hover-text-color);
  --tab-hover-border-color: var(--navigation-border-color);
  --tab-active-background-color: var(--navigation-active-background-color);
  --tab-active-text-color: var(--navigation-active-text-color);
  --tab-active-border-color: var(--navigation-active-indicator-color);
  --search-icon-color: var(--primary-link-hover-color);

  /* Forms. The previous dark field background is retired. */
  --page-field-background: #fff;
  --page-field-text: var(--secondary-font-color);
  --page-field-border: #06424d;
  --page-field-border-width: 1px;
  --page-field-radius: 8px;
  --form-label-color: #7d8584;
  --form-helper-color: #8fb3ba;
  --form-placeholder-color: #8fb3ba;
  --form-required-color: #fca5a5;
  --form-field-hover-border: #0a5664;
  --form-field-focus-border: #67c7d1;
  --form-field-focus-shadow: 0 0 0 3px rgba(103, 199, 209, 0.24);
  --form-field-disabled-background: #032f39;
  --form-field-disabled-text: #94b0b2;
  --form-choice-accent: #06717d;
  --form-fieldset-background: #00000000;
  --form-fieldset-border: #06424d;
  --form-fieldset-border-width: 0;
  --form-fieldset-radius: 8px;
  --form-legend-color: #f1f5f9;
  --form-textarea-background: var(--page-field-background);
  --form-textarea-text: var(--page-field-text);
  --textarea-background: var(--form-textarea-background);
  --textarea-text: var(--form-textarea-text);
  --form-input-border: var(--page-field-border);
  --form-error-background: #4c1d24;
  --form-error-text: #fecaca;
  --form-error-border: #ef4444;
  --error-background: var(--form-error-background);
  --error-text: var(--form-error-text);
  --error-border: var(--form-error-border);
  --form-success-background: #052e2b;
  --form-success-text: #bbf7d0;
  --form-success-border: #22c55e;

  /* Buttons */
  --color-button-bg: #06717d;
  --color-button-hover-bg: #055d67;
  --color-button-border: var(--standard-surface-border-color);
  --color-button-border-width: 1px;
  --color-button-radius: 20px;
  --color-button-text: var(--primary-font-color);
  --page-button-background: var(--color-button-bg);
  --page-button-text: var(--color-button-text);
  --button-full-background: #06717d;
  --button-full-text: var(--primary-font-color);
  --button-full-border: var(--standard-surface-border-color);
  --button-full-hover-background: #055d67;
  --button-communication-background: #043945;
  --button-communication-text: #67c7d1;
  --button-communication-border: var(--standard-surface-border-color);
  --button-communication-hover-background: #06424d;
  --button-communication-hover-text: var(--primary-font-color);
  --button-decline-background: #4c1d24;
  --button-decline-text: #fecaca;
  --button-decline-border: #ef4444;
  --button-flex-background: #06717d;
  --button-flex-text: var(--primary-font-color);
  --button-flex-border: var(--standard-surface-border-color);
  --button-flex-hover-background: #055d67;
  --reply-control-border: var(--primary-link-color);
  --button-full-set-image: url("../images/theme_samples/yusaso_metal_button_full.png");
  --button-mobile-set-image: url("../images/theme_samples/yusaso_metal_button_mobile.png");
  --button-background-image: var(--button-full-set-image);
  --button-background-image-opacity: 1;
  --connection-status-background: var(--primary-accent-color);
  --connection-status-text: #bbf7d0;
  --connection-status-border: var(--secondary-accent-color);

  /* Composer presentation */
  --secondary-toolbar-color: #222222;
  --primary-toolbar-color: #111111;
  --post-composer-control-background: var(--secondary-toolbar-color);
  --post-composer-control-border-color: var(--primary-toolbar-color);
  --post-composer-control-radius: 0.35rem;
  --post-composer-control-text-color: #ffffff;
  --post-composer-content-background: var(--form-textarea-background);
  --post-composer-content-text-color: var(--form-textarea-text);
  --post-composer-content-border-color: var(--page-field-border);
  --post-composer-choice-text: var(--post-composer-control-text-color);
  --composer-toolbar-background: var(--primary-toolbar-color);
  --composer-toolbar-border: var(--primary-accent-color);
  --composer-tool-background: var(--secondary-toolbar-color);
  --composer-tool-text: var(--primary-font-color);
  --composer-tool-text-color: var(--composer-tool-text);
  --composer-tool-hover-background: var(--primary-accent-color);
  --composer-editor-background: var(--form-textarea-background);
  --composer-editor-text: var(--form-textarea-text);
  --composer-caret-color: var(--form-textarea-text);
  --composer-swatch-border: var(--primary-link-hover-color);
  --composer-emoji-menu-background: var(--secondary-toolbar-color);
  --composer-gradient-decoration-color: var(--form-textarea-text);
  --composer-persona-gradient: linear-gradient(90deg, #2ca7a0, #4a90e2, #9b6bd3, #d85c5c, #c99b2e);
  --composer-active-gradient: var(--composer-persona-gradient);
  --post-composer-active-gradient: linear-gradient(135deg, currentColor 0 48%, transparent 48% 52%, currentColor 52% 100%);
  --composer-default-bg-color: transparent;
  --composer-editor-surface: #ffffff;
  --composer-editor-surface-color: #000000;

  /* Persona and identity surfaces */
  --persona-owner-surface: #000;
  --persona-owner-surface-muted: #000;
  --persona-owner-text: #f1f5f9;
  --persona-owner-text-muted: #c7d9d7;
  --persona-owner-border: var(--standard-surface-border-color);
  --persona-owner-accent: #67c7d1;
  --persona-owner-accent-soft: #06424d;
  --persona-owner-danger: #fecaca;
  --persona-owner-danger-soft: #4c1d24;
  --persona-owner-background: var(--theme-page-background);
  --persona-owner-background-border: transparent;
  --persona-owner-background-image: none;
  /* Current teal artwork is hidden while the replacement frame family is prepared. */
  --persona-owner-avatar-frame-image: none;
  --persona-owner-portrait-frame-image: none;
  --persona-owner-popup-frame-image: none;
  --persona-owner-background-opacity: 1;
  --persona-name-text: var(--primary-font-color);
  --persona-name-glow: #000000;
  --persona-micro-badge-name-hover-border: var(--secondary-color);
  --persona-micro-badge-name-hover-glow: #ffffff40;
  --dm-theme-name-hover-border: var(--persona-micro-badge-name-hover-border);
  --dm-theme-name-hover-glow: var(--persona-micro-badge-name-hover-glow);
  --persona-popup-background-image:
    var(--persona-owner-background-image),
    var(--persona-owner-background);
  --persona-mini-background-image: var(--persona-popup-background-image);
  --persona-badge-background: var(--theme-body-background);
  --persona-badge-background-opacity: 0.3;
  --persona-compact-background-color: var(--interactive-surface-background-color);
  --persona-compact-background-image:
    var(--persona-owner-background-image),
    var(--interactive-surface-background-image);
  --persona-compact-border-color: var(--interactive-surface-border-color);
  --persona-compact-hover-border-color: var(--interactive-surface-hover-border-color);
  --persona-compact-background: transparent;
  --persona-compact-border: transparent;
  --persona-authored-background: transparent;
  --content-selection-hover-background: var(--persona-badge-background);
  --content-selection-hover-border: var(--persona-owner-background-border);
  --persona-popup-background-color: var(--persona-owner-surface);
  --persona-left-column-background-color: #000000;
  --persona-left-column-border-color: transparent;
  --persona-left-column-border-width: 0px;
  --persona-left-column-frame-corner-image: none;
  --persona-left-column-frame-side-image: none;
  --persona-left-column-frame-side-vertical-image: none;
  --memory-board-background-color: #000000;
  --memory-board-border-color: #06424d;
  --memory-board-border-width: 2px;
  --memory-note-font-color: var(--secondary-font-color);
  --memory-board-frame-corner-image: none;
  --memory-board-frame-side-image: none;
  --memory-board-frame-side-vertical-image: none;
  --person-surface: var(--persona-owner-surface);
  --person-surface-muted: var(--persona-owner-surface-muted);
  --person-text: var(--persona-owner-text);
  --person-text-muted: var(--persona-owner-text-muted);
  --person-border: var(--persona-owner-border);
  --person-accent: var(--persona-owner-accent);
  --person-accent-soft: var(--persona-owner-accent-soft);
  --person-danger: var(--persona-owner-danger);
  --person-danger-soft: var(--persona-owner-danger-soft);
  --person-shadow: 0 12px 30px rgba(14, 37, 39, 0.18);
  --person-radius: 14px;

  /* Posts */
  --post-top-bar-background: var(--page-surface);
  --post-top-bar-text: var(--page-card-text);
  --post-top-bar-border: var(--page-divider-color);
  --post-body-background: var(--page-card-background);
  --post-body-text: var(--page-card-text);
  --post-body-border: var(--page-card-border);
  --post-metadata-text: var(--page-muted-text);
  --post-action-icon-color: var(--page-link-color);
  --post-action-icon-hover-color: var(--primary-font-color);
  --post-action-background: var(--secondary-color);
  --post-hashtag-text: var(--page-link-color);
  --post-reply-background: var(--page-surface);
  --post-reply-text: var(--page-card-text);
  --post-reply-delete-text: var(--post-reply-text);
  --post-reply-border: var(--page-divider-color);

  /* Header presentation tokens; empirical Header geometry stays in header.css.
     Max Theme exposes the image and its display behavior. */
  --header-background-color: #021f26;
  --header-background-image: none;
  --header-background-position: center;
  --header-background-size: cover;
  --header-background-repeat: no-repeat;
  --header-background-attachment: scroll;
  --header-overlay-color: rgba(2, 31, 38, 0.18);
  --header-text-color: #f8fafc;
  --header-link-color: #f8fafc;
  --header-link-hover-color: #06717d;
  --header-border-color: #06424d;
  --header-icon-color: #f8fafc;
  --header-avatar-border-color: #dfecea;
  --header-account-status-color: #c7dde0;
  --header-upgrade-link-color: #86efac;

  /* Navigation */
  --navigation-background-color: #ffffff;
  --navigation-text-color: #35575c;
  --navigation-icon-color: #486b70;
  --navigation-hover-background-color: #f1f5f9;
  --navigation-hover-text-color: #0e2527;
  --navigation-active-background-color: rgba(6, 113, 125, 0.12);
  --navigation-active-text-color: #06717d;
  --navigation-active-indicator-color: #06717d;
  --navigation-border-color: #dfecea;
  --navigation-button-border-width: 1px;
  --navigation-button-radius: 12px;
  --navigation-hover-icon-color: #06717d;
  --navigation-active-icon-color: #06717d;
  --widget-navigation-active-background: var(--navigation-active-background-color);
  --mobile-navigation-active-background: #06424d;

  /* Popups */
  --popup-background-color: var(--primary-color);
  --popup-text-color: var(--primary-font-color);
  --popup-hover-background-color: #043945;
  --popup-hover-text-color: #ffffff;
  --popup-button-hover-text: var(--popup-hover-text-color);
  --popup-border-color: var(--primary-accent-color);
  --popup-border-width: 1px;
  --popup-radius: 12px;
  --popup-divider-color: var(--primary-accent-color);
  --popup-shadow: 0 0 10px rgba(255, 255, 255, 0.2), 0 14px 34px rgba(0, 0, 0, 0.45);
  --popup-backdrop-color: #000000;
  --popup-backdrop-opacity: 0.72;

  /* Advertising surfaces */
  --advertisement-text: var(--page-muted-text);
  --advertisement-background: transparent;
  --advertisement-border: transparent;

  /* Adaptive Theme surface frames */
  --surface-frame-corner-image: none;
  --surface-frame-side-image: none;
  --surface-frame-side-vertical-image: none;
  --surface-frame-opacity: 0.72;

  /* Generic optional surfaces still receive explicit Theme-owned colors. */
  --panel-background: transparent;
  --panel-border-color: transparent;
  --list-item-background: transparent;
  --section-border: transparent;

  /* Footer */
  --footer-background-color: #021f26;
  --footer-text-color: #c7d9d7;
  --footer-link-color: #f8fafc;

  /* Accessibility */
  --focus-ring-color: #facc15;
  --page-focus-ring: var(--focus-ring-color);
}