/* ============================================================================
   REality — Design Tokens
   Values extracted from the Figma redesign (file f9wbg6cZDGGmeSnlp2QZn0), read
   from frame fills + the 34 text styles + 23 effect styles. Exact, not sampled.

   Primary is #335CFF (793 on-screen uses). The Base-Components kit was recoloured
   to #5283F4 (62 uses) — exposed as --color-primary-alt so it can be reconciled.
   The purple focus ring (#7D52F4) is treated as an AlignUI default and retinted
   to brand; the original is kept as --ring-primary-legacy.
   ========================================================================== */

/* ---- Fonts (self-hosted, SIL OFL 1.1). Paths are relative to THIS file. ---- */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/DMMono-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/DMMono-500.woff2") format("woff2");
}

:root {
  /* ============ BRAND ============ */
  --color-primary:          #335CFF;
  --color-primary-hover:    #3568E1;
  --color-primary-active:   #225DE7;
  --color-primary-darker:   #133A9A;
  --color-primary-soft:     #EBF1FF;   /* badge / info surface */
  --color-primary-soft-alt: #E3EAFD;
  --color-primary-muted:    #9EB7F1;
  --color-primary-alpha-10: rgb(51 92 255 / .10);
  --color-primary-alpha-20: rgb(53 104 225 / .20);

  /* Base-Components primary (reconcile or delete) */
  --color-primary-alt:        #5283F4;
  --color-primary-alt-hover:  #2C5BC9;
  --color-primary-alt-active: #254CA7;

  /* ============ NEUTRALS ============ */
  --color-bg:            #FFFFFF;
  --color-bg-subtle:     #FAFAFA;
  --color-bg-muted:      #F7F7F7;   /* hover surface, segmented track */
  --color-bg-disabled:   #F5F7FA;
  --color-border:        #EBEBEB;   /* the default 1px border everywhere */
  --color-border-soft:   #F0F0F0;
  --color-border-strong: #D1D1D1;
  --color-fg-disabled:   #D1D1D1;
  --color-fg-placeholder:#A3A3A3;
  --color-fg-muted:      #8E8E8E;
  --color-fg-secondary:  #5C5C5C;   /* body text */
  --color-fg:            #171717;   /* headings, active */

  /* table / structural grays (Untitled-UI ramp shipped with the table kit) */
  --color-gray-25:  #FCFCFD;
  --color-gray-50:  #F9FAFB;   /* table header fill */
  --color-gray-100: #F2F4F7;
  --color-gray-200: #EAECF0;   /* table row divider */
  --color-gray-300: #D0D5DD;
  --color-gray-500: #667085;
  --color-gray-600: #475467;   /* table header text */
  --color-gray-700: #344054;
  --color-gray-900: #101828;

  /* ============ SEMANTIC ============ */
  --color-error:      #FB3748;  --color-error-bg:   #FFEBEC;
  --color-success:    #17B26A;  --color-success-bg: #D1FAE4;  --color-success-fg: #166E3F;
  --color-warning:    #FA7319;  --color-warning-bg: #FFD9C0;  --color-warning-fg: #71330A;
  --color-info:       #335CFF;  --color-info-bg:    #EBF1FF;
  --color-feature:    #7B7B7B;
  --color-purple:     #7F56D9;

  /* KPI trend arrows encode DIRECTION, not good/bad (a red DOM drop can be good) */
  --color-trend-up:   var(--color-success);
  --color-trend-down: var(--color-error);

  /* ============ TYPE ============ */
  --font-sans:    "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Display", "Inter Variable", var(--font-sans);
  --font-mono:    "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* role: weight size/line-height ; paired --ls-* letter-spacing */
  --text-h1:        600 36px/44px var(--font-sans);   --ls-h1: -.7px;
  --text-h2:        600 32px/40px var(--font-sans);   --ls-h2: -.7px;
  --text-h3:        600 24px/32px var(--font-sans);   --ls-h3: -.2px;
  --text-display:   500 32px/40px var(--font-display);--ls-display: 0;
  --text-kpi:       500 28px/36px var(--font-sans);   --ls-kpi: -.4px;
  --text-h6:        500 18px/28px var(--font-sans);   --ls-h6: 0;
  --text-label-lg:  500 16px/20px var(--font-sans);   --ls-label-lg: -.096px;
  --text-label-md:  500 14px/20px var(--font-sans);   --ls-label-md: -.084px;  /* workhorse */
  --text-label-sm:  500 12px/16px var(--font-sans);   --ls-label-sm: 0;
  --text-label-xs:  500 11px/12px var(--font-sans);   --ls-label-xs: .22px;
  --text-strong-lg: 600 16px/24px var(--font-sans);   --ls-strong-lg: 0;
  --text-strong-md: 600 14px/20px var(--font-sans);   --ls-strong-md: 0;
  --text-body-lg:   400 18px/28px var(--font-sans);   --ls-body-lg: -.27px;
  --text-body-md:   400 14px/20px var(--font-sans);   --ls-body-md: -.084px;
  --text-body-sm:   400 13px/18px var(--font-sans);   --ls-body-sm: 0;
  --text-body-xs:   400 12px/16px var(--font-sans);   --ls-body-xs: 0;
  --text-overline:  500 12px/16px var(--font-sans);   --ls-overline: .48px;

  /* ============ SPACING (2px base, 4px rhythm) ============ */
  --space-0: 0;      --space-0-5: 2px;  --space-1: 4px;   --space-1-5: 6px;
  --space-2: 8px;    --space-2-5: 10px; --space-3: 12px;  --space-3-5: 14px;
  --space-4: 16px;   --space-4-5: 18px; --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;   --space-10: 40px;  --space-12: 48px; --space-16: 64px;

  /* ============ RADII ============ */
  --radius-xs: 2px;  --radius-sm: 4px;  --radius-md: 6px;  --radius-lg: 8px;
  --radius-xl: 10px;                 /* buttons, select trigger, segmented track */
  --radius-2xl: 12px;                /* text area, alert card */
  --radius-3xl: 16px;                /* content cards */
  --radius-4xl: 20px;                /* date-picker card */
  --radius-full: 9999px;

  /* ============ SHADOWS ============ */
  --shadow-xs:     0 1px 2px 0 rgb(10 13 20 / .05);
  --shadow-sm:     0 1px 3px 0 rgb(16 24 40 / .10), 0 1px 2px -1px rgb(16 24 40 / .10);
  --shadow-card:   0 1px 2px 0 rgb(16 24 40 / .06);
  --shadow-md:     0 2px 4px 0 rgb(14 18 27 / .03), 0 6px 10px 0 rgb(14 18 27 / .06);
  --shadow-lg:     0 16px 32px -12px rgb(14 18 27 / .10);   /* popover, modal, alert, date picker */
  --shadow-toggle: 0 2px 4px 0 rgb(14 18 27 / .08), 0 4px 8px 0 rgb(27 28 29 / .06);
  --shadow-drawer: 0 0 20px 0 rgb(16 24 40 / .16);

  /* focus rings — white inner cutout, tinted outer */
  --ring-field:          0 0 0 2px #FFFFFF, 0 0 0 4px rgb(153 160 174 / .16);
  --ring-primary:        0 0 0 2px #FFFFFF, 0 0 0 4px rgb(51 92 255 / .16);
  --ring-primary-legacy: 0 0 0 2px #FFFFFF, 0 0 0 4px rgb(125 82 244 / .10); /* AlignUI purple */
  --ring-error:          0 0 0 2px #FFFFFF, 0 0 0 4px rgb(251 55 72 / .10);

  /* ============ CONTROL / LAYOUT SIZES ============ */
  --control-h-sm: 36px;   /* text input, segmented track, dropdown item */
  --control-h-md: 40px;   /* button, select trigger, chip, day cell */
  --icon-sm: 16px; --icon-md: 20px;
  --tap: 44px;            /* enforced interactive minimum (Figma drew 40/24) */

  --nav-w: 300px;         /* desktop sidebar; drawer is 280 (set in shell.css) */
  --nav-wc: 76px;         /* collapsed sidebar rail (icons only) */
  --topbar-h: 64px;
  --gutter: 20px;
  --content-max: 1580px;

  --z-filterpanel: 40; --z-scrim: 50; --z-drawer: 60; --z-drilldown: 70; --z-modal: 80;
}

/* Optical sizing + a couple of tasteful Inter features on by default. */
:root { font-optical-sizing: auto; }