/* ==========================================================================
   Otocinclus Technology — design tokens v2.0.0
   Generated companion to brand/tokens.json. Drop this in, then build against
   the --oto-* semantic names only.

   Two tiers, and the distinction matters:
     --oto-<ramp>-<step>   primitive. The raw palette. Do not use in components.
     --oto-<role>          semantic. What the value is FOR. Use these.

   Products get dark by default (that is the brand's native surface) and a
   light set for print, email, exports, and anything embedded in a customer's
   own light UI. Both are authored, not derived — a flipped dark theme looks
   like a flipped dark theme.
   ========================================================================== */

:root {
  /* --- Primitive: navy ------------------------------------------------- */
  --oto-navy-25: #FAFBFD;
  --oto-navy-50: #F2F5F9;
  --oto-navy-100: #DCE3EC;
  --oto-navy-200: #B6C4D5;
  --oto-navy-300: #7A93B0;
  --oto-navy-400: #47698F;
  --oto-navy-500: #2A4E73;
  --oto-navy-600: #1D3B5C;
  --oto-navy-700: #152C48;
  --oto-navy-800: #0F2138;
  --oto-navy-900: #0A1628;
  --oto-navy-950: #060D18;

  /* --- Primitive: orbit orange (the accent) ---------------------------- */
  --oto-orange-100: #FFEBDD;
  --oto-orange-200: #FFD7BC;
  --oto-orange-300: #FFBB8C;
  --oto-orange-400: #FF9D5C;
  --oto-orange-500: #E8823C;
  --oto-orange-600: #C4611F;
  --oto-orange-700: #A8541F;

  /* --- Primitive: signal blue (from the mark's orbit rings) ------------ */
  --oto-blue-100: #E4EFF9;
  --oto-blue-200: #C3DCF1;
  --oto-blue-300: #92C2E6;
  --oto-blue-400: #5FA3D9;
  --oto-blue-500: #3E7CB1;
  --oto-blue-600: #2A6FA8;
  --oto-blue-700: #24506F;

  /* --- Primitive: green ------------------------------------------------ */
  --oto-green-100: #DFF3EB;
  --oto-green-300: #8CD0B7;
  --oto-green-500: #4FAE8C;
  --oto-green-600: #2F8C6B;
  --oto-green-700: #226B52;

  /* --- Status. Fixed in both themes: a status colour must mean the same
         thing on every surface, so these do not re-step. Never reuse one as
         a chart series colour, and never let one carry meaning alone —
         always icon + label as well. ------------------------------------ */
  --oto-status-good: #0CA30C;
  --oto-status-warning: #FAB219;
  --oto-status-serious: #EC835A;
  --oto-status-critical: #D03B3B;

  /* --- Type ------------------------------------------------------------ */
  --oto-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --oto-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --oto-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --oto-text-3xs: 0.6875rem;   /* 11px — eyebrows, table micro-labels */
  --oto-text-2xs: 0.75rem;     /* 12px */
  --oto-text-xs: 0.8125rem;    /* 13px */
  --oto-text-sm: 0.875rem;     /* 14px — dense UI default */
  --oto-text-base: 1rem;       /* 16px — reading default */
  --oto-text-lg: 1.125rem;
  --oto-text-xl: 1.375rem;
  --oto-text-2xl: 1.75rem;
  --oto-text-3xl: 2.25rem;
  --oto-text-4xl: 3rem;

  /* --- Space: 4px base. Use the scale, not arbitrary pixel values. ----- */
  --oto-space-1: 4px;
  --oto-space-2: 8px;
  --oto-space-3: 12px;
  --oto-space-4: 16px;
  --oto-space-5: 20px;
  --oto-space-6: 24px;
  --oto-space-8: 32px;
  --oto-space-10: 40px;
  --oto-space-12: 48px;
  --oto-space-16: 64px;
  --oto-space-20: 80px;
  --oto-space-24: 96px;

  /* --- Geometry -------------------------------------------------------- */
  --oto-radius-xs: 4px;    /* inputs, chips */
  --oto-radius-sm: 6px;    /* buttons */
  --oto-radius-md: 8px;    /* cards */
  --oto-radius-lg: 12px;   /* panels, modals */
  --oto-radius-xl: 16px;
  --oto-radius-full: 999px;

  /* --- Motion ---------------------------------------------------------- */
  --oto-duration-instant: 80ms;
  --oto-duration-fast: 160ms;
  --oto-duration-normal: 240ms;
  --oto-duration-slow: 400ms;
  --oto-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --oto-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --oto-ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ====================================================================
     Semantic — DARK (default). Product surfaces are dark unless there is
     a reason not to be.
     ==================================================================== */
  color-scheme: dark;

  --oto-bg-canvas: var(--oto-navy-950);
  --oto-bg-surface: var(--oto-navy-900);
  --oto-bg-raised: var(--oto-navy-800);
  --oto-bg-overlay: rgba(6, 13, 24, 0.72);

  --oto-border-subtle: rgba(232, 236, 241, 0.10);
  --oto-border-default: rgba(232, 236, 241, 0.18);
  --oto-border-strong: var(--oto-navy-600);

  --oto-fg-primary: #E8ECF1;
  --oto-fg-secondary: #A9B7C9;
  --oto-fg-muted: #6F8098;
  --oto-fg-on-action: var(--oto-navy-950);

  --oto-action-primary: var(--oto-orange-500);
  --oto-action-primary-hover: var(--oto-orange-400);
  --oto-action-link: var(--oto-blue-400);
  --oto-focus-ring: var(--oto-blue-400);

  /* Elevation is two shadows, not one: a tight contact shadow that anchors the
     object to the surface, plus a wide soft cast. A single blur reads as a
     sticker; the pair reads as something with thickness. */
  --oto-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 14px rgba(0, 0, 0, 0.22);
  --oto-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.32), 0 14px 34px rgba(0, 0, 0, 0.34);
  --oto-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.34), 0 28px 60px rgba(0, 0, 0, 0.44);

  /* The lit top edge. Pair with a shadow — the highlight is what sells the
     idea that light is coming from somewhere. */
  --oto-edge: inset 0 1px 0 rgba(232, 236, 241, 0.07);
  --oto-edge-warm: inset 0 1px 0 rgba(255, 157, 92, 0.16);

  /* Surfaces shift across their own face, lit from the top-left. Use these
     rather than a flat background on anything card-like. */
  --oto-face: linear-gradient(158deg, #12263F 0%, #0C1B2E 52%, #0A1728 100%);
  --oto-face-deep: linear-gradient(158deg, #0E1F35 0%, #08131F 60%, #060D18 100%);
  --oto-face-raised: linear-gradient(158deg, #183253 0%, #102340 55%, #0D1D33 100%);

  /* The two brand hues as one sweep. Hairlines and top edges only — never a
     full-bleed background. */
  --oto-sweep: linear-gradient(90deg, var(--oto-orange-500) 0%, #C4713F 38%, var(--oto-blue-500) 100%);

  /* --- Chart. Slots are assigned in fixed order and never cycled: a ninth
         series folds into "Other" or becomes small multiples. ----------- */
  --oto-chart-surface: var(--oto-navy-800);
  --oto-chart-grid: rgba(232, 236, 241, 0.08);
  --oto-chart-axis: var(--oto-navy-600);
  --oto-series-1: #3E7CB1;
  --oto-series-2: #D96A28;
  --oto-series-3: #199E70;
  --oto-series-4: #C98500;
  --oto-series-5: #D55181;
  --oto-series-6: #008300;
  --oto-series-7: #9085E9;
  --oto-series-8: #E66767;
  --oto-diverging-low: #3E7CB1;
  --oto-diverging-mid: #2A3F58;
  --oto-diverging-high: #E66767;
}

/* ======================================================================
   Semantic — LIGHT. Applied by an explicit [data-theme="light"] stamp, or
   by OS preference when nothing is stamped.
   ====================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --oto-bg-canvas: var(--oto-navy-50);
  --oto-bg-surface: #FFFFFF;
  --oto-bg-raised: var(--oto-navy-25);
  --oto-bg-overlay: rgba(10, 22, 40, 0.44);

  --oto-border-subtle: var(--oto-navy-100);
  --oto-border-default: var(--oto-navy-200);
  --oto-border-strong: var(--oto-navy-300);

  --oto-fg-primary: var(--oto-navy-900);
  --oto-fg-secondary: var(--oto-navy-500);
  --oto-fg-muted: var(--oto-navy-400);
  --oto-fg-on-action: #FFFFFF;

  /* Orange 500 is the brand accent but only reaches 2.6:1 on white — the
     600 step is the one that carries an action label in light mode. */
  --oto-action-primary: var(--oto-orange-600);
  --oto-action-primary-hover: var(--oto-orange-700);
  --oto-action-link: var(--oto-blue-600);
  --oto-focus-ring: var(--oto-blue-600);

  --oto-shadow-1: 0 1px 2px rgba(10, 22, 40, 0.06), 0 4px 14px rgba(10, 22, 40, 0.07);
  --oto-shadow-2: 0 2px 4px rgba(10, 22, 40, 0.07), 0 14px 34px rgba(10, 22, 40, 0.10);
  --oto-shadow-3: 0 4px 8px rgba(10, 22, 40, 0.08), 0 28px 60px rgba(10, 22, 40, 0.14);

  --oto-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --oto-edge-warm: inset 0 1px 0 rgba(232, 130, 60, 0.22);

  --oto-face: linear-gradient(158deg, #FFFFFF 0%, #FBFCFE 55%, #F5F8FC 100%);
  --oto-face-deep: linear-gradient(158deg, #F7F9FC 0%, #F1F4F9 60%, #EDF1F7 100%);
  --oto-face-raised: linear-gradient(158deg, #FFFFFF 0%, #FDFDFF 55%, #F8FAFD 100%);

  --oto-chart-surface: var(--oto-navy-25);
  --oto-chart-grid: var(--oto-navy-100);
  --oto-chart-axis: var(--oto-navy-200);
  --oto-series-1: #2A6FA8;
  --oto-series-2: #D9722C;
  --oto-series-3: #1BAF7A;
  --oto-series-4: #EDA100;
  --oto-series-5: #E87BA4;
  --oto-series-6: #008300;
  --oto-series-7: #4A3AA7;
  --oto-series-8: #E34948;
  --oto-diverging-low: #2A6FA8;
  --oto-diverging-mid: #E6E9EF;
  --oto-diverging-high: #E34948;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --oto-bg-canvas: var(--oto-navy-50);
    --oto-bg-surface: #FFFFFF;
    --oto-bg-raised: var(--oto-navy-25);
    --oto-bg-overlay: rgba(10, 22, 40, 0.44);

    --oto-border-subtle: var(--oto-navy-100);
    --oto-border-default: var(--oto-navy-200);
    --oto-border-strong: var(--oto-navy-300);

    --oto-fg-primary: var(--oto-navy-900);
    --oto-fg-secondary: var(--oto-navy-500);
    --oto-fg-muted: var(--oto-navy-400);
    --oto-fg-on-action: #FFFFFF;

    --oto-action-primary: var(--oto-orange-600);
    --oto-action-primary-hover: var(--oto-orange-700);
    --oto-action-link: var(--oto-blue-600);
    --oto-focus-ring: var(--oto-blue-600);

    --oto-shadow-1: 0 1px 2px rgba(10, 22, 40, 0.06), 0 4px 14px rgba(10, 22, 40, 0.07);
    --oto-shadow-2: 0 2px 4px rgba(10, 22, 40, 0.07), 0 14px 34px rgba(10, 22, 40, 0.10);
    --oto-shadow-3: 0 4px 8px rgba(10, 22, 40, 0.08), 0 28px 60px rgba(10, 22, 40, 0.14);

    --oto-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --oto-edge-warm: inset 0 1px 0 rgba(232, 130, 60, 0.22);

    --oto-face: linear-gradient(158deg, #FFFFFF 0%, #FBFCFE 55%, #F5F8FC 100%);
    --oto-face-deep: linear-gradient(158deg, #F7F9FC 0%, #F1F4F9 60%, #EDF1F7 100%);
    --oto-face-raised: linear-gradient(158deg, #FFFFFF 0%, #FDFDFF 55%, #F8FAFD 100%);

    --oto-chart-surface: var(--oto-navy-25);
    --oto-chart-grid: var(--oto-navy-100);
    --oto-chart-axis: var(--oto-navy-200);
    --oto-series-1: #2A6FA8;
    --oto-series-2: #D9722C;
    --oto-series-3: #1BAF7A;
    --oto-series-4: #EDA100;
    --oto-series-5: #E87BA4;
    --oto-series-6: #008300;
    --oto-series-7: #4A3AA7;
    --oto-series-8: #E34948;
    --oto-diverging-low: #2A6FA8;
    --oto-diverging-mid: #E6E9EF;
    --oto-diverging-high: #E34948;
  }
}

/* ======================================================================
   Two base rules worth inheriting rather than reinventing per product.
   ====================================================================== */
:where(body) {
  background: var(--oto-bg-canvas);
  color: var(--oto-fg-primary);
  font-family: var(--oto-font-ui);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--oto-focus-ring);
  outline-offset: 2px;
  border-radius: var(--oto-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --oto-duration-instant: 0ms;
    --oto-duration-fast: 0ms;
    --oto-duration-normal: 0ms;
    --oto-duration-slow: 0ms;
  }
}