/**
 * assets/styles/ds/tokens.css
 *
 * THE ONE PLACE A COLOUR, A SIZE OR A DURATION IS DECIDED.
 *
 * Everything else in ds/ styles through these names and never writes a literal.
 * That is not tidiness: it is the only way the dark theme can exist at all. A
 * component that hard-codes #fff is a component that renders white text on a
 * white ground the moment the viewer's phone is in dark mode, and there are
 * 214 admin templates here -- far too many to audit one literal at a time.
 *
 * WHERE THE PALETTE COMES FROM
 * The logo is a house with a coral roof and a blue body, drawn for children.
 * So the brand is not the institutional navy a management system would reach
 * for by default, and it is not a rainbow either: the blue carries the chrome
 * (it has to survive eight hours on a register screen), the coral carries
 * attention and the child-facing moments, and warmth is spent on imagery and
 * shape rather than smeared over the furniture.
 *
 * The old accent was #03a9f3 -- the stock accent of the purchased admin theme,
 * the same one shipped to everyone who bought it. Nothing in this product
 * chose it.
 *
 * THE PRODUCT IS LIGHT.
 * The bare :root below carries the whole palette and it is what every viewer
 * gets. There is no automatic dark theme: this product renders a great deal of
 * colour it does not own -- each nursery's logo, the photographs staff upload,
 * the icon set, the category colours an owner picks -- and all of it was
 * authored against a light page. The dark palette is kept further down and is
 * reachable only by an explicit data-theme="dark" stamp, so nothing inverts
 * underneath somebody else's artwork on its own.
 */

:root {
  /* ---- brand ---------------------------------------------------------- */
  --brand-950: #04212F;
  --brand-900: #062F43;
  --brand-800: #0B4159;
  --brand-700: #0E5273;   /* primary: buttons, active nav, links on light */
  --brand-600: #136B91;
  --brand-500: #1B87B0;   /* interactive hover */
  --brand-400: #4EA8C9;
  --brand-300: #8CC8DD;
  --brand-200: #C2E1EC;
  --brand-100: #DFEFF5;
  --brand-050: #F0F8FB;

  /* ---- warm secondary, from the roof of the logo ----------------------- */
  --sun-700: #B4502A;
  --sun-600: #D2653A;
  --sun-500: #E8834F;
  --sun-300: #F4B48D;
  --sun-100: #FCE9DD;
  --sun-050: #FEF5EF;

  /* ---- neutrals -------------------------------------------------------- *
   * Biased a few degrees toward the brand rather than pure grey. A pure
   * #808080 beside a blue accent reads as an unconsidered default.           */
  --n-0:   #FFFFFF;
  --n-25:  #FAFBFC;
  --n-50:  #F4F7F9;
  --n-100: #E9EEF2;
  --n-200: #D8E0E6;
  --n-300: #BCC8D1;
  --n-400: #94A4B0;
  --n-500: #5F7079;   /* muted text: 3.75:1 at #6F818E, which is below 4.5 */
  --n-600: #56676F;
  --n-700: #3E4E57;
  --n-800: #2A373F;
  --n-900: #17232A;
  --n-950: #0D161B;

  /* ---- semantic, kept apart from the brand ---------------------------- *
   * "Good" must not be the accent, or a page full of accent reads as a page
   * full of success.                                                        */
  --ok-700:   #1F5F44;
  --ok-600:   #2A7A57;
  --ok-100:   #DCF0E6;
  --warn-700: #8A5410;
  --warn-600: #AD6C15;
  --warn-100: #FBEBD2;
  --bad-700:  #96301F;
  --bad-600:  #BB3D28;
  --bad-100:  #FADFDA;
  --info-700: var(--brand-700);
  --info-600: var(--brand-600);
  --info-100: var(--brand-100);

  /* ---- roles: what components actually reference ----------------------- */
  --ground:        var(--n-50);    /* the page behind everything */
  --surface:       var(--n-0);     /* cards, panels, table bodies */
  --surface-2:     var(--n-25);    /* striped rows, inset wells */
  --surface-3:     var(--n-100);   /* hovered rows, disabled fills */
  --line:          var(--n-200);   /* the ordinary border */
  /**
   * An input's edge is the boundary of a control, so 1.4.11 asks 3:1 against
   * the surface behind it. --n-300 measured 1.70:1 -- the field was drawn, and
   * on a bright screen or a cheap tablet it was not there.
   */
  --line-strong:   #808E99;
  --ink:           var(--n-900);   /* body text */
  --ink-2:         var(--n-700);   /* secondary text still meant to be read */
  --ink-muted:     var(--n-500);   /* labels, captions, meta */
  --ink-faint:     var(--n-400);   /* placeholders only; never real content */
  --ink-on-brand:  #FFFFFF;
  --accent:        var(--brand-700);
  --accent-hover:  var(--brand-600);
  --accent-wash:   var(--brand-050);
  --accent-line:   var(--brand-200);
  --focus:         var(--brand-500);

  /* The admin shell is dark in both themes. A sidebar that inverts with the
     theme changes the whole spatial reading of the screen twice a day. */
  --shell:         var(--brand-950);
  --shell-2:       var(--brand-900);
  --shell-line:    rgba(255, 255, 255, .09);
  --shell-ink:     #D6E5EC;
  --shell-ink-dim: #7E9AA8;
  --shell-active:  var(--brand-700);

  /* ---- type ------------------------------------------------------------ *
   * Two families, chosen for Arabic first and checked in Latin second --
   * which is the opposite of how this codebase was built, and the reason the
   * old screens set Latin faces and let Arabic fall back to whatever the
   * device had.
   *
   * Readex Pro carries identity: open counters, a warm geometric Arabic that
   * does not read as a system font. It is used for headings and the brand.
   * IBM Plex Sans Arabic carries the work: it stays legible at 13px in a dense
   * table, and it has real tabular figures, which a register of times and
   * amounts cannot do without.                                               */
  --font-display: "Readex Pro", "Noto Kufi Arabic", "Segoe UI", system-ui, sans-serif;
  --font-ui: "IBM Plex Sans Arabic", "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;

  /* A scale, not a pile of arbitrary sizes. 1.200 minor third -- tight enough
     for dense data screens, wide enough that a page has a hierarchy. */
  --t-3xs: 11px;
  --t-2xs: 12px;
  --t-xs:  13px;
  --t-sm:  14px;
  --t-md:  15px;   /* admin body: dense screens read better a notch down */
  --t-lg:  17px;   /* public body */
  --t-xl:  20px;
  --t-2xl: 24px;
  --t-3xl: 30px;
  --t-4xl: 38px;
  --t-5xl: clamp(2.2rem, 5vw, 3.4rem);

  --lh-tight: 1.35;
  --lh-snug:  1.55;
  --lh-body:  1.75;   /* Arabic needs more room than Latin; this is not padding */
  --lh-loose: 1.9;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ---- space: a 4px base, and nothing between the steps ---------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;

  /* ---- shape ----------------------------------------------------------- *
   * Small and consistent. A 12px radius on every single block is the tell of
   * a design that made one decision and applied it everywhere.               */
  --r-xs:   3px;
  --r-sm:   5px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   18px;
  --r-pill: 999px;

  /* ---- elevation ------------------------------------------------------- *
   * Borders describe structure. Shadows are spent only on things that truly
   * float above the page, so that when something floats, it means something.  */
  --e-1: 0 1px 2px rgba(13, 22, 27, .06);
  --e-2: 0 2px 4px rgba(13, 22, 27, .06), 0 6px 16px -8px rgba(13, 22, 27, .16);
  --e-3: 0 8px 24px -6px rgba(13, 22, 27, .18), 0 2px 6px rgba(13, 22, 27, .08);
  --e-4: 0 20px 48px -12px rgba(13, 22, 27, .28);
  --ring: 0 0 0 3px color-mix(in srgb, var(--focus) 34%, transparent);

  /* ---- motion ---------------------------------------------------------- */
  --dur-1: 110ms;
  --dur-2: 180ms;
  --dur-3: 280ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ---- layout ---------------------------------------------------------- */
  --shell-w: 268px;       /* admin sidebar */
  --shell-w-collapsed: 72px;
  --topbar-h: 62px;
  --measure: 68ch;        /* reading width; Arabic runs longer than Latin */
  --wrap: 1180px;
  --wrap-wide: 1440px;

  --z-base: 1;
  --z-sticky: 20;
  --z-shell: 40;
  --z-drop: 60;
  --z-overlay: 80;
  --z-modal: 100;
  --z-toast: 120;
}

/* ---------------------------------------------------------------------- *
 * LIGHT, AND ONLY LIGHT UNLESS SOMEONE ASKS OTHERWISE.
 *
 * There was an automatic dark theme here, switched by prefers-color-scheme.
 * It is gone, deliberately.
 *
 * The reason is not taste. This product is full of colour it does not control:
 * a nursery's own logo, the photographs staff upload, the icon set, the
 * category colours an owner picks in /superadmin, the WhatsApp green. Those
 * are authored against a light page. Inverting the ground underneath them
 * leaves a light-built logo glowing in a dark card and an icon palette that
 * was balanced for white sitting on near-black -- which is exactly what was
 * reported.
 *
 * A dark theme for a product like this is not a token swap; it is a second
 * design, including a second answer for every asset somebody else uploaded.
 * Until that is done, shipping the switch does harm on a phone whose owner
 * never asked this site for anything.
 *
 * The dark palette below is kept and reachable ONLY by an explicit
 * data-theme="dark" stamp, so the work is not thrown away and nothing turns
 * dark by itself.
 * ---------------------------------------------------------------------- */

/* The explicit dark choice, which must also beat a light operating system. */
:root[data-theme="dark"] {
  --ground:      var(--n-950);
  --surface:     #141F26;
  --surface-2:   #18242C;
  --surface-3:   #1F2E37;
  --line:        #263741;
  --line-strong: #354B57;
  --ink:         #E6EDF1;
  --ink-2:       #BCCBD4;
  --ink-muted:   #8DA1AD;
  --ink-faint:   #6C808D;
  --accent:      var(--brand-300);
  /**
   * DARK TEXT ON THE BRAND FILL, and it is not a preference.
   *
   * The accent goes pale in dark mode so that links stay legible on a dark
   * ground -- which is right. But --ink-on-brand stayed #FFFFFF, so every
   * filled button rendered white on pale blue: a measured 1.84:1, where the
   * standard asks 4.5:1. The label was there and could not be read.
   *
   * Dark ink on the same pale fill measures 9.04:1, and the accent still
   * measures 9.95:1 as a link colour on the page ground. Both jobs, one hue.
   */
  --ink-on-brand: var(--brand-950);

  --accent-hover: var(--brand-200);
  --accent-wash: #14303D;
  --accent-line: #1F4D60;
  --focus:       var(--brand-300);

  --shell:       #08161E;
  --shell-2:     #0C1F29;
  --shell-active: var(--brand-800);

  --ok-600:   #5FBE8E;
  --ok-100:   #123324;
  --warn-600: #DCA254;
  --warn-100: #33270F;
  --bad-600:  #E4796A;
  --bad-100:  #3A1E19;

  /**
   * The state inks, which the dark block used to leave alone.
   *
   * Only --ok-600/--ok-100 and their siblings were redefined, so a dark badge
   * painted the LIGHT theme's dark ink (#1F5F44) on the DARK theme's dark
   * fill (#123324): 1.82:1. Same for warning at 2.33 and bad at 1.99. Three
   * state colours that could not be read at all in dark mode.
   */
  --ok-700:   #9FD9B8;
  --warn-700: #F0C48A;
  --bad-700:  #F5B3A8;
  --line-strong: #55707F;


  --e-1: 0 1px 2px rgba(0, 0, 0, .4);
  --e-2: 0 2px 4px rgba(0, 0, 0, .4), 0 6px 16px -8px rgba(0, 0, 0, .6);
  --e-3: 0 8px 24px -6px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
  --e-4: 0 20px 48px -12px rgba(0, 0, 0, .7);
}

/* Tell the browser which way to paint its own furniture -- scrollbars, form
   controls, the gap behind an overscrolled page. Without this the native bits
   stay light against a dark page. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }