/* ==========================================================================
   Ayuda domain-connection prototype — design tokens
   Section 7 of the working design direction. Mirrors the running product.
   Everything is local: no font is fetched, no stylesheet is imported.
   "IBM Plex Sans"/"IBM Plex Mono" lead the stack; if they are not installed
   locally the listed fallbacks render instead. That is expected.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------ */
  --bg:            #FAFBFC;   /* page canvas */
  --surface:       #FFFFFF;   /* cards, tables */
  --surface-alt:   #F5F6F8;   /* table headers, code chips, subtle fills */
  --rule:          #E2E5E9;   /* 1px borders, dividers */
  --rule-strong:   #ECEEF1;
  --ink:           #232833;   /* body text, values */
  --ink-heading:   #363D49;   /* headings */
  --ink-strong:    #0B0D11;
  --ink-2:         #667080;   /* labels, descriptions, meta */
  --ink-3:         #8D95A1;   /* hints, disabled */
  --brand:         #D93F04;   /* primary buttons, brand marks */
  --accent:        #A52A84;   /* secondary emphasis, small areas only */
  --warn:          #B45309;
  --ok:            #15803D;

  /* Derived tints. Used only as flat fills — never as elevation. */
  --brand-ink:     #FFFFFF;
  --brand-hover:   #C23803;
  /* One step further down the same brand ramp. Text-safe: brand itself only
     reaches 3.97:1 on --brand-quiet and 4.50:1 on white, so any brand-coloured
     WORD uses this instead. Fills and marks keep --brand. */
  --brand-deep:    #A83203;
  /* Same reasoning for the green word on its own tint: --ok reaches 4.46:1
     there, just under AA. */
  --ok-deep:       #11662F;
  --brand-quiet:   #FBEEE9;
  --warn-quiet:    #FBF2E4;
  --ok-quiet:      #EAF4EE;
  --accent-quiet:  #F7EDF4;

  /* The ONLY shadow in the system. */
  --shadow:        0 1px 1px rgba(11, 13, 17, 0.04);

  /* Focus. Always visible, never removed. */
  --focus:         #1A5FCC;
  --focus-ring:    0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  /* --- Type -------------------------------------------------------------- */
  --font-ui:   "IBM Plex Sans", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* This is a 13px UI. A 16px base will not look like the product. */
  --fs-title:  28px;  --lh-title:  32.2px;   /* page title, one per page */
  --fs-card:   16px;  --lh-card:   18.2px;   /* card title */
  --fs-sub:    14px;  --lh-sub:    20px;     /* sub-heading */
  --fs-body:   13px;  --lh-body:   18.85px;  /* dominant */
  --fs-small:  12px;  --lh-small:  17.4px;   /* secondary, table cells */
  --fs-meta:   11px;  --lh-meta:   15.6px;   /* labels, meta, chips, hints */

  --fw-normal: 400;   /* most common */
  --fw-med:    500;   /* close behind */
  --fw-bold:   600;   /* rare */

  /* --- Spacing (tight, 2px-based; 10 and 12 do most of the work) --------- */
  --s-1:  2px;
  --s-2:  6px;
  --s-3:  10px;
  --s-4:  12px;
  --s-5:  16px;
  --s-6:  20px;
  --s-7:  24px;

  /* --- Radius ------------------------------------------------------------ */
  --r-sm:  3px;
  --r-md:  6px;    /* buttons, cards */
  --r-lg:  8px;    /* large containers */
  --r-pill: 999px;

  /* --- Layout ------------------------------------------------------------ */
  --rail-w:     55px;   /* client: collapsed icon rail */
  --sidebar-w:  240px;  /* ops: expanded sidebar */
  --topbar-h:   52px;
  --content-w:  850px;  /* client: single stacked column */
  --content-w-ops: 1180px;

  /* --- Study apparatus (NOT product chrome) ------------------------------ */
  --study-bg:      #12161D;
  --study-ink:     #E7EAEF;
  --study-ink-2:   #9AA4B2;
  --study-rule:    #2A313C;
  --study-accent:  #7FB2FF;
  --proposed-rule: #A52A84;   /* dashed outline on proposed regions */
  --proposed-tag-bg: #A52A84;
  --proposed-tag-ink: #FFFFFF;
  --studybar-h:    0px;       /* set at runtime by studybar.js */
}