/* ComunicAI design system — tokens.
 *
 * Layers:
 *   1. BRAND        immutable source of truth (official product colours). Never redefined, never tinted in place.
 *   2. SEMANTIC     accent/status derived FROM the brand tokens with color-mix().
 *   3. THEME        light (default) and dark (alternative). Each theme is designed on its own; dark is not an inversion.
 *
 * Fonts are loaded by each page (<link>) — Inter (UI), JetBrains Mono (values/code), Syne 800 (brand wordmark only).
 */

/* ── 1. BRAND — do not edit values, do not override ─────────────────────── */
:root {
  --brand-comunicai:            #1a8c5c;
  --brand-comunicai-secondary:  #13a06a;
  --brand-medicai:              #00b4ff;
  --brand-medicai-secondary:    #0066cc;
  --brand-tourism:              #ff6b6b;   /* found in code; not confirmed as official — kept as-is */
  --brand-tourism-secondary:    #ffa500;
}

/* ── 2. PRODUCT → ACCENT (derived, never modified) ──────────────────────── */
:root, :root[data-product="comunicai"] {
  --ds-brand:           var(--brand-comunicai);
  --ds-brand-2:         var(--brand-comunicai-secondary);
  --ds-on-brand:        #ffffff;
  --ds-text-mix:        80%;
}
:root[data-product="medicai"] {
  --ds-brand:           var(--brand-medicai);
  --ds-brand-2:         var(--brand-medicai-secondary);
  --ds-on-brand:        #031521;           /* white on #00b4ff is 2.3:1, dark is 7.9:1 */
  --ds-text-mix:        62%;
}
:root[data-product="tourism"] {
  --ds-brand:           var(--brand-tourism);
  --ds-brand-2:         var(--brand-tourism-secondary);
  --ds-on-brand:        #2a0808;
  --ds-text-mix:        66%;
}

/* ── 3a. THEME: LIGHT (default) ─────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Surface hierarchy */
  --ds-canvas:      #f3f5f4;                    /* L0  app background (carries the ambient light) */
  --ds-surface:     #ffffff;                    /* L1  content card                                */
  --ds-surface-2:   #f8faf9;                    /* L1+ card header / raised strip                  */
  --ds-well:        #edf1ef;                    /* L2  recessed controls (inputs, selects)         */
  --ds-well-hover:  #e6ece9;
  --ds-glass:       rgba(255, 255, 255, 0.68);  /* L3  topbar, dock, modal, drawer                 */
  --ds-glass-edge:  rgba(255, 255, 255, 0.75);
  --ds-pop:         #ffffff;                    /* L4  popover, palette, tooltip                   */
  --ds-scrim:       rgba(14, 28, 21, 0.38);
  --ds-hover:       rgba(15, 40, 28, 0.045);
  --ds-active:      rgba(15, 40, 28, 0.08);

  /* Lines */
  --ds-line:        rgba(15, 40, 28, 0.11);
  --ds-line-subtle: rgba(15, 40, 28, 0.065);
  --ds-line-strong: rgba(15, 40, 28, 0.22);

  /* Text — ≥4.5:1 on canvas, surface and well */
  --ds-text:        #0f1a15;
  --ds-text-2:      #42504a;
  --ds-text-muted:  #5f6d66;

  /* Accent (all derived from --ds-brand) */
  --ds-accent:        var(--ds-brand);
  --ds-accent-hover:  color-mix(in srgb, var(--ds-brand) 88%, #000);
  --ds-accent-text:   color-mix(in srgb, var(--ds-brand) var(--ds-text-mix, 80%), #000);   /* text/icons on light: ≥5:1 per product */
  --ds-accent-tint:   color-mix(in srgb, var(--ds-brand) 9%, var(--ds-surface));
  --ds-accent-tint-2: color-mix(in srgb, var(--ds-brand) 16%, var(--ds-surface));
  --ds-accent-line:   color-mix(in srgb, var(--ds-brand) 38%, transparent);
  --ds-focus:         color-mix(in srgb, var(--ds-brand) 55%, transparent);
  --ds-selection:     color-mix(in srgb, var(--ds-brand) 22%, transparent);
  --ds-glow:          color-mix(in srgb, var(--ds-brand) 30%, transparent);
  --ds-ambient:
    radial-gradient(900px 520px at 6% -10%, color-mix(in srgb, var(--ds-brand) 10%, transparent), transparent 70%),
    radial-gradient(720px 480px at 100% 0%, color-mix(in srgb, var(--ds-brand) 5%, transparent), transparent 70%);

  /* Status (semantic, independent of the product brand) */
  --ds-success:      #15803d;  --ds-success-tint: #e8f5ec;
  --ds-warning:      #b45309;  --ds-warning-tint: #fdf3e2;
  --ds-error:        #c0392b;  --ds-error-tint:   #fdecea;
  --ds-info:         #2563eb;  --ds-info-tint:    #eaf0fd;

  /* Depth (green-tinted shadows: never grey/black on a light canvas) */
  --ds-highlight:    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --ds-inset:        inset 0 1px 2px rgba(15, 40, 28, 0.08);
  --ds-shadow-card:  0 1px 2px rgba(15, 40, 28, 0.05), 0 6px 16px -8px rgba(15, 40, 28, 0.10);
  --ds-shadow-float: 0 10px 28px -8px rgba(15, 40, 28, 0.20), 0 2px 6px rgba(15, 40, 28, 0.06);
  --ds-shadow-over:  0 28px 64px -14px rgba(15, 40, 28, 0.32), 0 6px 16px rgba(15, 40, 28, 0.08);
  --ds-glass-blur:   blur(18px) saturate(165%);
}

/* ── 3b. THEME: DARK (alternative) ──────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ds-canvas:      #0b0f0d;
  --ds-surface:     #121815;
  --ds-surface-2:   #161d19;
  --ds-well:        #0d1210;                    /* wells go DARKER than the card in dark mode */
  --ds-well-hover:  #101613;
  --ds-glass:       rgba(20, 28, 24, 0.62);
  --ds-glass-edge:  rgba(255, 255, 255, 0.10);
  --ds-pop:         #1a231e;
  --ds-scrim:       rgba(2, 5, 4, 0.62);
  --ds-hover:       rgba(255, 255, 255, 0.05);
  --ds-active:      rgba(255, 255, 255, 0.09);

  --ds-line:        rgba(255, 255, 255, 0.10);
  --ds-line-subtle: rgba(255, 255, 255, 0.06);
  --ds-line-strong: rgba(255, 255, 255, 0.20);

  --ds-text:        #e9efec;
  --ds-text-2:      #a7b4ad;
  --ds-text-muted:  #7f8d86;

  --ds-accent-hover:  color-mix(in srgb, var(--ds-brand) 84%, #fff);
  --ds-accent-text:   color-mix(in srgb, var(--ds-brand) 40%, #fff);   /* 7.9:1 on the dark surface */
  --ds-accent-tint:   color-mix(in srgb, var(--ds-brand) 13%, var(--ds-surface));
  --ds-accent-tint-2: color-mix(in srgb, var(--ds-brand) 22%, var(--ds-surface));
  --ds-accent-line:   color-mix(in srgb, var(--ds-brand) 50%, transparent);
  --ds-glow:          color-mix(in srgb, var(--ds-brand) 38%, transparent);
  --ds-ambient:
    radial-gradient(900px 520px at 6% -10%, color-mix(in srgb, var(--ds-brand) 16%, transparent), transparent 70%),
    radial-gradient(720px 480px at 100% 0%, color-mix(in srgb, var(--ds-brand) 8%, transparent), transparent 70%);

  --ds-success:      #4ade80;  --ds-success-tint: rgba(74, 222, 128, 0.12);
  --ds-warning:      #fbbf24;  --ds-warning-tint: rgba(251, 191, 36, 0.12);
  --ds-error:        #f87171;  --ds-error-tint:   rgba(248, 113, 113, 0.13);
  --ds-info:         #60a5fa;  --ds-info-tint:    rgba(96, 165, 250, 0.13);

  --ds-highlight:    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --ds-inset:        inset 0 1px 3px rgba(0, 0, 0, 0.45);
  --ds-shadow-card:  0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  --ds-shadow-float: 0 10px 28px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
  --ds-shadow-over:  0 28px 64px -14px rgba(0, 0, 0, 0.75), 0 6px 16px rgba(0, 0, 0, 0.4);
  --ds-glass-blur:   blur(18px) saturate(150%);
}

/* ── 4. THEME-INDEPENDENT ───────────────────────────────────────────────── */
:root {
  /* Type */
  --ds-font:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --ds-font-brand:  'Syne', 'Inter', sans-serif;   /* wordmark only */
  --ds-fs-display:  40px;
  --ds-fs-h1:       28px;
  --ds-fs-h2:       20px;
  --ds-fs-h3:       16px;
  --ds-fs-body:     14px;
  --ds-fs-small:    13px;
  --ds-fs-label:    12px;
  --ds-fs-caption:  11.5px;
  --ds-fs-code:     12.5px;

  /* Spacing (4px base) */
  --ds-s1: 4px; --ds-s2: 8px; --ds-s3: 12px; --ds-s4: 16px; --ds-s5: 20px;
  --ds-s6: 24px; --ds-s8: 32px; --ds-s10: 40px; --ds-s12: 48px; --ds-s16: 64px;

  /* Radius */
  --ds-r-sm: 6px; --ds-r-md: 10px; --ds-r-lg: 16px; --ds-r-xl: 22px; --ds-r-pill: 999px;

  /* Motion */
  --ds-ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ds-ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --ds-t-fast:      120ms;   /* hover, press            */
  --ds-t-normal:    200ms;   /* UI transitions          */
  --ds-t-slow:      300ms;   /* panels, drawers, rail   */
  --ds-t-page:      320ms;   /* page entrance           */
  --ds-t-modal:     240ms;

  /* Layout */
  --ds-dock-space:          96px;   /* room reserved for the floating navigation dock */
  --ds-topbar-h:            56px;
}

/* ── 5. MOTION / LIGHT (shared by every page through motion.css) ────────── */
:root {
  --fx-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);      /* small overshoot: switch thumb, pop-in    */
  --fx-smooth:   cubic-bezier(0.22, 1, 0.36, 1);         /* long ease-out: panels, modals            */
  --fx-hi:       rgba(255, 255, 255, 0.55);              /* specular highlight                        */
  --fx-hi-soft:  rgba(255, 255, 255, 0.22);
  --fx-lo:       rgba(15, 40, 28, 0.10);
  --fx-sheen:    rgba(255, 255, 255, 0.38);
  --fx-edge:     linear-gradient(135deg, color-mix(in srgb, var(--ds-brand) 55%, #fff) 0%, var(--ds-brand) 45%, var(--ds-brand-2) 100%);
  --fx-glow-1:   color-mix(in srgb, var(--ds-brand) 26%, transparent);
  --fx-glow-2:   color-mix(in srgb, var(--ds-brand) 14%, transparent);
  interpolate-size: allow-keywords;                      /* lets <details> animate to height:auto (Chromium) */
}
:root[data-theme="dark"] {
  --fx-hi: rgba(255, 255, 255, 0.14);
  --fx-hi-soft: rgba(255, 255, 255, 0.06);
  --fx-lo: rgba(0, 0, 0, 0.5);
  --fx-sheen: rgba(255, 255, 255, 0.16);
  --fx-glow-1: color-mix(in srgb, var(--ds-brand) 38%, transparent);
  --fx-glow-2: color-mix(in srgb, var(--ds-brand) 20%, transparent);
}


/* registered so a hover "spotlight" can be TRANSITIONED (0 → 1) while living in a plain background-image */
@property --fx-spot { syntax: '<number>'; inherits: false; initial-value: 0; }

/* ── 6. MENU / LISTBOX (popover lists: demo picker today, any dropdown tomorrow) ───────────────── */
:root {
  --ds-menu-radius:  var(--ds-r-lg);
  --ds-menu-pad:     6px;
  --ds-menu-item-h:  42px;
  --ds-menu-max-h:   340px;
  --ds-menu-gap:     8px;                                   /* distance from the field */
  --ds-menu-bg:      linear-gradient(180deg, color-mix(in srgb, var(--ds-pop) 88%, transparent), color-mix(in srgb, var(--ds-pop) 74%, transparent));
  --ds-menu-blur:    blur(22px) saturate(190%);
  --ds-menu-shadow:  0 24px 48px -16px rgba(15, 40, 28, .34), 0 6px 14px rgba(15, 40, 28, .08), 0 0 60px -24px var(--ds-glow);
}
:root[data-theme="dark"] {
  --ds-menu-bg:      linear-gradient(180deg, color-mix(in srgb, var(--ds-pop) 86%, transparent), color-mix(in srgb, var(--ds-pop) 70%, transparent));
  --ds-menu-shadow:  0 24px 48px -16px rgba(0, 0, 0, .8), 0 6px 14px rgba(0, 0, 0, .4), 0 0 60px -24px var(--ds-glow);
}