/* ==========================================================================
   ESTRATO - Design System tokens for Stratum SRL
   Single source of truth for every visual primitive. See /DESIGN_SYSTEM.md
   for the rationale behind each decision.

   Status: foundations only. Not yet imported by any page - this file
   defines tokens + base rules, it does not restyle existing components.
   ========================================================================== */

:root{
  /* Tells the browser which native UI (select dropdown popups, scrollbars,
     date pickers) to render - without this, an open <select> in dark mode
     renders with the OS/browser's default light popup chrome regardless of
     our custom CSS on the closed control, since that popup isn't ours to
     style. Flipped to `dark` inside html.dark below. */
  color-scheme: light;

  /* ---- 1. Brand + neutral surfaces (light) ---------------------------
     Source-of-truth values are specified in OKLCH in DESIGN_SYSTEM.md §7.1;
     hex below is the declared value for broad browser support. No surface
     is pure #FFFFFF/#000000 - every neutral carries a hair of the brand hue
     (see DESIGN_SYSTEM.md §7.1 on why "never true white" matters here). */
  --color-bg:#F3F5F8;              /* oklch(96.4% 0.004 240) */
  --color-surface:#FFFFFE;         /* oklch(99.4% 0.002 165) - not pure white */
  --color-surface-2:#FAFBFC;       /* oklch(98.3% 0.003 200) */
  --color-border:#E6E9EF;          /* oklch(92.6% 0.006 240) */
  --color-border-strong:#D6DCE5;   /* oklch(88.4% 0.008 240) */
  --color-text:#0F1B2D;            /* oklch(23.9% 0.032 250) */
  --color-text-2:#586577;          /* oklch(45.9% 0.030 250) */
  --color-text-3:#8B96A6;          /* oklch(63.5% 0.020 250) */

  /* Accent chroma runs higher than a generic "safe SaaS accent" would -
     intentional, this is the client's real pre-existing brand mark, kept
     as-is rather than desaturated to match an abstract guideline. */
  --color-accent:#0D7C66;          /* oklch(49.5% 0.100 165) */
  --color-accent-2:#0A5A49;        /* oklch(38.2% 0.082 165) */
  --color-accent-soft:#E1F3EE;     /* oklch(94.9% 0.030 165) */
  --color-accent-ring:rgba(13,124,102,.30);
  --color-accent-on:#FFFFFF; /* text/icon color on top of a solid accent fill - white-on-saturated-fill is the one accepted exception to "never true white" */

  /* ---- 2. Semantic roles (light) -------------------------------------- */
  --color-success-bg:#DFF2E9;   --color-success-text:#0A6A50;  --color-success-dot:#15A87B;
  --color-warning-bg:#FBF0D6;   --color-warning-text:#875706;  --color-warning-dot:#C98A12;
  --color-danger-bg:#FCE8E5;    --color-danger-text:#AE2E1D;   --color-danger-dot:#DC4A36;
  --color-info-bg:#E5EEFB;      --color-info-text:#1A52A8;     --color-info-dot:#2F73D6;
  --color-discovery-bg:#ECEAFB; --color-discovery-text:#4A3FA0;--color-discovery-dot:#8C7FE0;

  --color-skeleton-1:#EAEEF3;
  --color-skeleton-2:#F4F7FA;

  /* ---- 3. Typography ---------------------------------------------------*/
  --font-ui:Manrope,ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --text-overline-size:11px;  --text-overline-lh:16px;  --text-overline-weight:700; --text-overline-tracking:.06em;
  --text-caption-size:12px;   --text-caption-lh:16px;   --text-caption-weight:600;
  --text-body-sm-size:13px;   --text-body-sm-lh:20px;   --text-body-sm-weight:500;
  --text-body-size:14px;      --text-body-lh:22px;      --text-body-weight:500;
  --text-h4-size:15px;        --text-h4-lh:20px;        --text-h4-weight:700;
  --text-h3-size:16px;        --text-h3-lh:24px;        --text-h3-weight:700;
  --text-h2-size:20px;        --text-h2-lh:28px;        --text-h2-weight:700;
  --text-h1-size:28px;        --text-h1-lh:36px;        --text-h1-weight:800;
  --text-display-size:36px;   --text-display-lh:44px;   --text-display-weight:800;

  --text-mono-sm-size:12px;   --text-mono-sm-lh:16px;
  --text-mono-size:13px;      --text-mono-lh:20px;
  --text-mono-lg-size:18px;   --text-mono-lg-lh:24px;

  /* ---- 4. Spacing (4px base unit) --------------------------------------*/
  --space-0:0;    --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;

  /* ---- 5. Radius --------------------------------------------------------*/
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:20px;
  --radius-full:9999px;

  /* ---- 6. Elevation (light) ---------------------------------------------*/
  --elevation-0:none;
  --elevation-1:0 1px 2px rgba(16,27,45,.04), 0 1px 1px rgba(16,27,45,.03);
  --elevation-2:0 4px 10px rgba(16,27,45,.08);
  --elevation-3:0 8px 24px rgba(16,27,45,.12);
  --elevation-4:0 24px 60px rgba(16,27,45,.20);
  --elevation-5:0 12px 32px rgba(16,27,45,.18), 0 0 0 1px rgba(16,27,45,.04);
  --elevation-border:transparent; /* dark mode overrides this to a real border color, see below */

  /* ---- 7. Motion ---------------------------------------------------------*/
  --duration-instant:100ms;
  --duration-fast:150ms;
  --duration-base:200ms;
  --duration-slow:300ms;
  --duration-slower:400ms;

  --ease-standard:cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-emphasized-in:cubic-bezier(0.55, 0, 1, 0.45);

  /* ---- 8. Breakpoints (reference only - for JS/media-query mirrors) ----*/
  --bp-sm:640px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px; --bp-2xl:1536px;
}

/* ---- Dark mode ----------------------------------------------------------
   Same mechanism already used in the codebase: toggling html.dark swaps the
   custom-property values underneath every component. Components must never
   declare their own dark: variant - see DESIGN_SYSTEM.md §13.
   ------------------------------------------------------------------------- */
html.dark{
  color-scheme: dark;
  --color-bg:#0A111E;
  --color-surface:#121B2C;
  --color-surface-2:#0E1626;
  --color-border:#21304A;
  --color-border-strong:#2C3C58;
  --color-text:#E9EDF4;
  --color-text-2:#9BA7B9;
  --color-text-3:#6B7891;

  --color-accent:#2ED3A6;          /* oklch(76.8% 0.140 165) */
  --color-accent-2:#7DE6C9;        /* oklch(87.1% 0.110 165) */
  --color-accent-soft:#10362C;     /* oklch(24.8% 0.045 165) */
  --color-accent-ring:rgba(46,211,166,.32);
  --color-accent-on:#06231C;

  --color-success-bg:#0F3328;  --color-success-text:#74D9B4;  --color-success-dot:#2CC999;
  --color-warning-bg:#382A0F;  --color-warning-text:#F0C470;  --color-warning-dot:#E0A94A;
  --color-danger-bg:#3A1A16;   --color-danger-text:#F09A8B;   --color-danger-dot:#E0644F;
  --color-info-bg:#13294A;     --color-info-text:#9DBEF2;     --color-info-dot:#5B8DE8;
  --color-discovery-bg:#231E45;--color-discovery-text:#B7AEF0;--color-discovery-dot:#9C8CF0;

  --color-skeleton-1:#18233A;
  --color-skeleton-2:#202D48;

  /* Dark elevation is border-first, not shadow-first - a shadow barely
     reads against a near-black surface. See DESIGN_SYSTEM.md §6.1. */
  --elevation-1:0 1px 2px rgba(0,0,0,.4);
  --elevation-2:0 4px 12px rgba(0,0,0,.5);
  --elevation-3:0 8px 28px rgba(0,0,0,.55);
  --elevation-4:0 24px 64px rgba(0,0,0,.65);
  --elevation-5:0 12px 32px rgba(0,0,0,.6);
  --elevation-border:var(--color-border-strong);
}

/* ---- Base type rules ------------------------------------------------------
   Utility classes for the nine-step type scale (§2.2). Components apply
   these instead of ad hoc font-size/line-height/weight declarations.
   ------------------------------------------------------------------------- */
.text-overline{font-family:var(--font-ui);font-size:var(--text-overline-size);line-height:var(--text-overline-lh);font-weight:var(--text-overline-weight);letter-spacing:var(--text-overline-tracking);text-transform:uppercase}
.text-caption{font-family:var(--font-ui);font-size:var(--text-caption-size);line-height:var(--text-caption-lh);font-weight:var(--text-caption-weight)}
.text-body-sm{font-family:var(--font-ui);font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh);font-weight:var(--text-body-sm-weight)}
.text-body{font-family:var(--font-ui);font-size:var(--text-body-size);line-height:var(--text-body-lh);font-weight:var(--text-body-weight)}
.text-h4{font-family:var(--font-ui);font-size:var(--text-h4-size);line-height:var(--text-h4-lh);font-weight:var(--text-h4-weight)}
.text-h3{font-family:var(--font-ui);font-size:var(--text-h3-size);line-height:var(--text-h3-lh);font-weight:var(--text-h3-weight)}
.text-h2{font-family:var(--font-ui);font-size:var(--text-h2-size);line-height:var(--text-h2-lh);font-weight:var(--text-h2-weight);letter-spacing:-0.01em}
.text-h1{font-family:var(--font-ui);font-size:var(--text-h1-size);line-height:var(--text-h1-lh);font-weight:var(--text-h1-weight);letter-spacing:-0.02em}
.text-display{font-family:var(--font-ui);font-size:var(--text-display-size);line-height:var(--text-display-lh);font-weight:var(--text-display-weight);letter-spacing:-0.02em}

.text-mono-sm{font-family:var(--font-mono);font-size:var(--text-mono-sm-size);line-height:var(--text-mono-sm-lh);font-variant-numeric:tabular-nums}
.text-mono{font-family:var(--font-mono);font-size:var(--text-mono-size);line-height:var(--text-mono-lh);font-variant-numeric:tabular-nums}
.text-mono-lg{font-family:var(--font-mono);font-size:var(--text-mono-lg-size);line-height:var(--text-mono-lg-lh);font-weight:600;font-variant-numeric:tabular-nums}

/* ---- Focus ring (mandatory on every interactive element, §11) ----------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent-ring);
  border-radius:var(--radius-sm);
}

/* ---- Motion: respect reduced-motion, §9.3 -------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---- Skeleton shimmer (loading state, §12) ------------------------------- */
.skeleton{
  background:linear-gradient(90deg, var(--color-skeleton-1) 25%, var(--color-skeleton-2) 37%, var(--color-skeleton-1) 63%);
  background-size:400% 100%;
  animation:estrato-shimmer 1.4s linear infinite;
  border-radius:var(--radius-xs);
  display:block;
}
@keyframes estrato-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---- Semantic chip helper (status must pair color + icon + text, §7.3) --- */
.chip{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-ui);font-size:var(--text-overline-size);font-weight:700;padding:3px var(--space-2);border-radius:var(--radius-xs);white-space:nowrap}
.chip .dot{width:6px;height:6px;border-radius:var(--radius-full);flex-shrink:0}
.chip-success{background:var(--color-success-bg);color:var(--color-success-text)} .chip-success .dot{background:var(--color-success-dot)}
.chip-warning{background:var(--color-warning-bg);color:var(--color-warning-text)} .chip-warning .dot{background:var(--color-warning-dot)}
.chip-danger{background:var(--color-danger-bg);color:var(--color-danger-text)}    .chip-danger .dot{background:var(--color-danger-dot)}
.chip-info{background:var(--color-info-bg);color:var(--color-info-text)}         .chip-info .dot{background:var(--color-info-dot)}
.chip-discovery{background:var(--color-discovery-bg);color:var(--color-discovery-text)} .chip-discovery .dot{background:var(--color-discovery-dot)}