/* ══════════════════════════════════════════════════════════════════════════
   DIGITAL UMBRELLA: tokens for the Drafted identity

   Decided by Hisham on 27 Sep 2026: the look is Drafted (an umbrella drawn by
   a pen, stroke by stroke) and the slogan is "Never under the weather."

   Three rules every value below serves:
     1. One pen draws everything, in order.
     2. Amber marks only what does the work: the action, the measure, the
        struts that hold the umbrella up, the one row that needs you.
     3. Results are written in the margin, on a leader line.

   Dark is the default and the ground everywhere, products included. Light is
   the same drawing in ink on paper, for printouts, exports and anyone who
   switches to it; set it with data-theme="light" on any element. Contrast ratios are WCAG 2.1,
   computed, not estimated. Text floor 5.6:1; control edges 3:1.
   ══════════════════════════════════════════════════════════════════════════ */

@import url('./fonts.css');

:root, [data-theme="dark"] {
  color-scheme: dark;

  /* ground */
  --bg:         #11141A;   /* the page */
  --raise:      #181C24;   /* fields and product tiles, lifted by colour, never by shadow */
  --rule:       #2A303C;   /* hairline between rows */
  --rule-2:     #3A414F;   /* a ruled line the pen draws; dimension baselines */
  --edge:       #6B7384;   /* control boundary: 3.9:1 on --bg, 3.6:1 on --raise */

  /* ink */
  --ink:        #EEF1F5;   /* headings and body: 16.3:1 on --bg, 15.1:1 on --raise */
  --ink-2:      #B3BAC7;   /* secondary text:     9.5:1 on --bg,  8.8:1 on --raise */
  --ink-3:      #8D95A5;   /* dimmest text allowed: 6.1:1 on --bg, 5.7:1 on --raise */

  /* the drawing */
  --pen:        #B3BAC7;   /* canopy, hem, shaft */
  --pen-2:      #8D95A5;   /* ribs, extension lines, open list nodes */

  /* amber: only what does the work */
  --amber:      #FFB547;   /* the action fill, struts, runner */
  --amber-line: #FFB547;   /* amber drawn as a line: 10.5:1 on --bg */
  --amber-text: #FFB547;   /* amber written as text (the slogan): 10.5:1 on --bg */
  --on-amber:   #11141A;   /* text on an amber fill: 10.5:1 */

  --danger:     #FF7A6B;   /* errors: 7.2:1 on --bg, 6.7:1 on --raise */
  --focus:      #EEF1F5;   /* focus ring */

  /* behind a dialog: the ground itself at 80%, laid over the page like tracing paper. Not a shadow
     and not black: the page's --ink drops to 1.8:1, so nothing under it competes with the dialog */
  --scrim:      color-mix(in srgb, var(--bg) 80%, transparent);
}

[data-theme="light"] {
  color-scheme: light;

  --bg:         #F7F6F2;   /* paper */
  --raise:      #FFFFFF;
  --rule:       #E4E1D8;
  --rule-2:     #CFCBC0;
  --edge:       #7A8190;   /* 3.6:1 on --bg, 3.9:1 on --raise */

  --ink:        #14171E;   /* 16.6:1 on --bg, 17.9:1 on --raise */
  --ink-2:      #474E5C;   /*  7.7:1 on --bg,  8.4:1 on --raise */
  --ink-3:      #5B6270;   /*  5.7:1 on --bg,  6.1:1 on --raise */

  --pen:        #3A414F;
  --pen-2:      #7A8190;

  --amber:      #FFB547;   /* fills only: as a line on paper it is 1.6:1 and vanishes */
  --amber-line: #A36200;   /* amber drawn as a line: 4.5:1 on --bg, 4.9:1 on --raise (lines need 3:1) */
  --amber-text: #8E5500;   /* amber written as text: 5.6:1 on --bg, 6.1:1 on --raise (text needs 5.6:1) */
  --on-amber:   #14171E;   /* 10.2:1 */

  --danger:     #B42318;   /* 6.1:1 on --bg */
  --focus:      #14171E;

  --scrim:      color-mix(in srgb, var(--bg) 80%, transparent);   /* paper's --ink under it: 1.5:1 */
}

:root {
  /* type: Sora for Latin, Readex Pro for Arabic; each is loaded only for its own letters, so one stack serves both */
  --font:        'Sora', 'Readex Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display:  clamp(36px, 5.2vw, 56px);  /* the homepage headline, weight 600, tracking -0.035em */
  --fs-h1:       32px;                      /* page title, 600 */
  --fs-h2:       24px;                      /* section, 600 */
  --fs-h3:       18px;                      /* group, 600 */
  --fs-lead:     19px;                      /* the line under the headline, 400 */
  --fs-body:     16px;                      /* marketing body, 400 */
  --fs-ui:       14px;                      /* product body, rows, tabs, 400 to 600 */
  --fs-dense:    13px;                      /* many-column tables: Sora sets about 12% wider than a narrow UI face */
  --fs-small:    12.5px;                    /* meta, notes on leader lines */
  --fs-label:    12px;                      /* field labels, dimension values */
  --lh-tight:    1.05;
  --lh-body:     1.5;

  /* shape and space */
  --r:           6px;                       /* buttons, fields */
  --r-lg:        10px;                      /* tiles */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --line-w:      1.5px;                     /* a pen stroke in the interface */
  --note-w:      1px;                       /* a leader line */
  --target:      44px;                      /* minimum touch target */

  /* motion: the pen. Product speed is the default; show speed is for the homepage drawing only */
  --ease-pen:    cubic-bezier(.45, 0, .2, 1);
  --pen-stroke:  200ms;                     /* one stroke, in a product */
  --pen-stagger: 40ms;                      /* between strokes, in a product */
  --pen-note:    120ms;                     /* a note's words appear this long after its leader lands */
  --pen-stroke-show:  700ms;                /* one stroke of the homepage drawing */
  --pen-stagger-show: 120ms;
  --pen-cap:     8;                         /* at most this many strokes are staggered; the rest arrive with the last */
}

/* paper: exports and printouts always use the light theme, with every fill kept */
@media print {
  :root, [data-theme="dark"] {
    color-scheme: light;
    --bg: #FFFFFF; --raise: #FFFFFF; --rule: #E4E1D8; --rule-2: #CFCBC0; --edge: #7A8190;
    --ink: #14171E; --ink-2: #474E5C; --ink-3: #5B6270; --pen: #3A414F; --pen-2: #7A8190;
    --amber: #FFB547; --amber-line: #A36200; --amber-text: #8E5500; --on-amber: #14171E; --danger: #B42318; --focus: #14171E;
  }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}