/* ===========================================================================
   Quantum Blue - Ice Glass - the design system
   ---------------------------------------------------------------------------
   This is the only file in the project that may contain a literal colour, and
   only inside a :root declaration block. Every component rule elsewhere
   references a token from here. Reskinning the product means editing the ramp
   below and nothing else.
   =========================================================================== */

:root {

  /* ---- quantum blue ramp ------------------------------------------------ */
  --blue-50:  #eef4ff;
  --blue-100: #dce8ff;
  --blue-200: #bdd3ff;
  --blue-300: #91b3ff;
  --blue-400: #5f8bfa;
  --blue-500: #2f63f0;   /* quantum blue - the core brand colour */
  --blue-600: #1a47d6;
  --blue-700: #1436aa;
  --blue-800: #122c82;
  --blue-900: #0f2059;
  --blue-950: #08123a;

  /* ---- ice neutrals (cool-cast greys) ----------------------------------- */
  --ice-0:   #ffffff;
  --ice-50:  #f7fafe;
  --ice-100: #eef3fa;
  --ice-200: #e1e9f4;
  --ice-300: #cbd8e8;
  --ice-400: #a3b4cb;
  --ice-500: #7787a0;
  --ice-600: #57657d;
  --ice-700: #3e4a5e;
  --ice-800: #29313f;
  --ice-900: #181e29;
  --ice-950: #0c1018;
  --ice-1000: #080b12;

  /* ---- accents ---------------------------------------------------------- */
  --green-100: #d9f5e8;
  --green-500: #0e9f6e;
  --green-600: #067a53;
  --amber-100: #fdf0d6;
  --amber-500: #d68b16;
  --amber-600: #8a5608;   /* dark enough to clear 4.5:1 on --amber-100 */
  --red-100:   #fde0e0;
  --red-500:   #d8434c;
  --red-600:   #ad2b33;
  --violet-100:#e7e5fd;
  --violet-500:#6b62e8;
  --cyan-100:  #d5f0f8;
  --cyan-500:  #1a9fc4;

  /* ---- glass ------------------------------------------------------------ */
  --glass-tint:      rgba(255, 255, 255, 0.62);
  --glass-tint-soft: rgba(255, 255, 255, 0.40);
  --glass-edge:      rgba(255, 255, 255, 0.85);
  --glass-line:      rgba(47, 99, 240, 0.14);
  --glass-shine:     rgba(255, 255, 255, 0.55);
  --glass-blur:      18px;
  --scrim:           rgba(15, 32, 89, 0.45);

  /* ---- on a brand-blue surface ------------------------------------------
     Overlays for content sitting ON the brand colour rather than on a page:
     the sign-in panel's chips and rules, its corner glow, and the shadow that
     lifts the emblem off it. */
  --on-brand-fill:   rgba(255, 255, 255, 0.12);
  --on-brand-line:   rgba(255, 255, 255, 0.16);
  --brand-glow:      rgba(95, 139, 250, 0.45);
  --on-brand-shadow: rgba(8, 18, 58, 0.35);

  /* ---- semantic surfaces ------------------------------------------------ */
  --app-bg:        var(--ice-100);
  --app-bg-2:      var(--blue-50);
  --app-wash:      radial-gradient(1100px 620px at 12% -8%, var(--blue-100), transparent 62%),
                   radial-gradient(920px 520px at 100% 0%, var(--cyan-100), transparent 58%),
                   linear-gradient(180deg, var(--ice-50), var(--ice-100));
  --panel-bg:      var(--glass-tint);
  --panel-solid:   var(--ice-0);
  --panel-border:  var(--glass-line);
  --panel-raised:  rgba(255, 255, 255, 0.78);
  --input-bg:      rgba(255, 255, 255, 0.86);
  --input-border:  var(--ice-300);
  --input-focus:   var(--blue-500);
  --rail-bg:       rgba(255, 255, 255, 0.70);
  --row-hover:     rgba(47, 99, 240, 0.055);
  --row-stripe:    rgba(47, 99, 240, 0.025);
  --divider:       var(--ice-200);

  /* ---- semantic text ---------------------------------------------------- */
  --text:          var(--ice-900);
  --text-strong:   var(--blue-950);
  --text-muted:    var(--ice-600);
  --text-subtle:   var(--ice-500);
  --text-inverse:  var(--ice-0);
  --text-brand:    var(--blue-700);

  /* ---- brand roles ------------------------------------------------------ */
  --brand:         var(--blue-500);
  --brand-strong:  var(--blue-600);
  --brand-deep:    var(--blue-800);
  --brand-soft:    var(--blue-50);
  --brand-soft-2:  var(--blue-100);
  --brand-ink:     var(--ice-0);
  --brand-ring:    rgba(47, 99, 240, 0.28);
  --brand-grad:    linear-gradient(135deg, var(--blue-500), var(--blue-700));
  --brand-grad-soft: linear-gradient(135deg, var(--blue-100), var(--cyan-100));

  /* ---- tones ------------------------------------------------------------ */
  --tint-success:     var(--green-600);
  --tint-success-bg:  var(--green-100);
  --tint-warning:     var(--amber-600);
  --tint-warning-bg:  var(--amber-100);
  --tint-danger:      var(--red-600);
  --tint-danger-bg:   var(--red-100);
  --tint-info:        var(--violet-500);
  --tint-info-bg:     var(--violet-100);
  --tint-neutral:     var(--ice-600);
  --tint-neutral-bg:  var(--ice-200);

  /* ---- data visualisation ---------------------------------------------- */
  --series-1: #2f63f0;
  --series-2: #1a9fc4;
  --series-3: #0e9f6e;
  --series-4: #6b62e8;
  --series-5: #d68b16;
  --series-6: #d8434c;
  --series-7: #5f8bfa;
  --series-8: #7787a0;
  --grid-line: rgba(87, 101, 125, 0.18);
  --axis-text: var(--ice-500);
  --chart-fill-top: rgba(47, 99, 240, 0.28);
  --chart-fill-bottom: rgba(47, 99, 240, 0.02);

  /* ---- print / documents ------------------------------------------------ */
  --paper:        #ffffff;
  --paper-ink:    #10151f;
  --paper-muted:  #55637a;
  --paper-rule:   #c9d6e8;
  --paper-accent: #1436aa;
  --guilloche:    rgba(20, 54, 170, 0.07);
  --qr-ink:       #10151f;
  --qr-bg:        #ffffff;

  /* ---- the permit card ---------------------------------------------------
     A plastic card is not a sheet of paper: it carries a pale field, a printed
     guilloche and a banner, so it gets its own semantic roles rather than
     borrowing the document ones. They are all drawn from the ramp, so the card
     follows a reskin like everything else. */
  --card-bg:      var(--ice-50);
  --card-bg-2:    var(--blue-50);
  --card-ink:     var(--blue-950);
  /* These two are literals rather than ramp steps on purpose. The card
     reproduces an issued document, so its blues are specified by the design of
     that document and are not ours to reskin - the same reasoning that keeps
     the flag artwork out of the stylesheet. The ramp's own blues are a more
     electric indigo and read wrong beside the arms.
     White on --card-band measures 4.6:1, so the banner still carries its
     caption. */
  --card-accent:  #2a62a8;
  --card-band:    #3576c2;
  --card-muted:   var(--ice-600);
  --card-rule:    var(--ice-400);
  --card-wave:    var(--blue-200);
  --card-edge:    var(--blue-100);
  /* The machine-readable zone is pure black, not the document's near-black
     ink: a scanner thresholds the band, and every point of contrast it gets
     is a point it does not have to recover. The QR code is black on paper for
     the same reason. */
  --mrz-ink:      #000000;
  /* A barcode is thresholded the same way, so it gets the same pure black on
     pure white rather than the document's softer ink. */
  --barcode-ink:  #000000;
  --barcode-bg:   #ffffff;

  /* ---- the employment authorization letter -------------------------------
     The printed letterhead the ministry issues. Like the card, this
     reproduces an issued document, so its three colours are specified by that
     document rather than drawn from our ramp - and like the card they are
     measured, not chosen by eye:

       --ea-title on paper           5.2:1
       --ea-accent on paper          6.8:1
       white on --ea-band            4.7:1

     all clear of 4.5:1, so every line on the sheet carries at normal size. */
  --ea-accent:    #1f5c9e;
  --ea-title:     #d7192c;
  --ea-band:      #4176b4;
  --ea-rule:      var(--paper-ink);
  --ea-panel:     var(--ice-500);
  --ea-label:     var(--paper-ink);
  --ea-value:     var(--ice-800);
  --ea-wave:      rgba(31, 92, 158, 0.055);

  /* ---- shape ------------------------------------------------------------ */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---- elevation -------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(15, 32, 89, 0.06), 0 1px 3px rgba(15, 32, 89, 0.05);
  --shadow-2: 0 4px 12px rgba(15, 32, 89, 0.08), 0 1px 3px rgba(15, 32, 89, 0.05);
  --shadow-3: 0 18px 44px rgba(15, 32, 89, 0.14), 0 2px 8px rgba(15, 32, 89, 0.06);
  --shadow-glass: inset 0 1px 0 var(--glass-shine), 0 6px 22px rgba(15, 32, 89, 0.07);
  --ring: 0 0 0 3px var(--brand-ring);

  /* ---- spacing ---------------------------------------------------------- */
  --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;

  /* ---- type ------------------------------------------------------------- */
  --font: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-doc: "Georgia", "Times New Roman", serif;
  /* Poppins carries no Arabic, so the letterhead's Arabic line falls to
     whatever the machine has. Named faces first, then the generic. */
  --font-ar: 'Geeza Pro', 'Noto Naskh Arabic', 'Al Bayan', 'Segoe UI', serif;
  /* Reference numbers are the project font, not a typewriter face. Monospace
     was only ever there to keep digits in a column, and tabular figures do
     that without introducing a second typeface. */
  --font-ref: var(--font);
  /* The machine-readable zone is the one place a fixed pitch is not a style
     choice: a scanner reads it by character cell. OCR-B is what ICAO 9303
     specifies; the monospace fallbacks keep the cells even if it is absent. */
  --font-mrz: "OCR B", "OCR-B", "OCRB", "Courier New", "Liberation Mono", monospace;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 27px;
  --fs-3xl: 34px;
  --lh-tight: 1.25;
  --lh: 1.55;
  --tracking-caps: 0.08em;

  /* ---- geometry --------------------------------------------------------- */
  --control-h: 44px;
  --control-h-sm: 34px;
  /* Controls and buttons carry their own radius: a 6px box reads as an input,
     while the larger --r-lg belongs to panels. Kept apart so softening a card
     never rounds a text field with it. */
  --r-control: 6px;
  --control-pad-x: 12px;
  --btn-h: 40px;
  --btn-pad-x: 16px;
  --sidebar-w: 254px;
  --topbar-h: 62px;
  --row-h: 60px;
  /* No cap: the content fills the width beside the sidebar, held off the
     window only by --page-gutter. A centred 1480px column left ~115px of dead
     space either side on a 1920 screen, which on a register of tables reads as
     wasted width rather than as a measure. */
  --page-max: none;

  /* The one gutter between the page and the window. The topbar and the
     content share it and share --page-max, so the search box, the avatar and
     every panel below them line up on the same two edges at every width.
     Change it here, not in a component. */
  --page-gutter: clamp(16px, 1.8vw, 32px);

  /* ---- form rhythm ------------------------------------------------------
     Deliberately tight: a label sits close to the control it names, and rows
     sit closer to each other than a field's own parts do, so a form reads as
     rows rather than as a list of loose boxes. */
  --field-label-gap: 8px;
  --field-foot-gap: 5px;
  --field-gap-x: 16px;
  --field-gap-y: 16px;
  --field-icon-pad: 38px;

  /* ---- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 120ms;
  --normal: 200ms;
  --slow: 320ms;
}

/* ===========================================================================
   Dark theme - only the semantic tokens change. The ramps stay put.
   Attached to an explicit choice, not to the operating system, because an
   office expects the portal to look the way they last left it.
   =========================================================================== */

:root[data-theme="dark"] {
  --glass-tint:      rgba(30, 41, 59, 0.55);
  --glass-tint-soft: rgba(30, 41, 59, 0.34);
  --glass-edge:      rgba(255, 255, 255, 0.10);
  --glass-line:      rgba(145, 179, 255, 0.16);
  --glass-shine:     rgba(255, 255, 255, 0.07);
  --scrim:           rgba(4, 8, 18, 0.66);

  --app-bg:        var(--ice-950);
  --app-bg-2:      var(--blue-950);
  --app-wash:      radial-gradient(1100px 620px at 12% -8%, rgba(20, 54, 170, 0.55), transparent 62%),
                   radial-gradient(920px 520px at 100% 0%, rgba(26, 159, 196, 0.22), transparent 58%),
                   linear-gradient(180deg, var(--ice-1000), var(--ice-950));
  --panel-bg:      rgba(25, 33, 46, 0.62);
  --panel-solid:   #151c28;
  --panel-border:  rgba(145, 179, 255, 0.15);
  --panel-raised:  rgba(33, 43, 59, 0.80);
  --input-bg:      rgba(10, 15, 24, 0.62);
  --input-border:  rgba(145, 179, 255, 0.20);
  --input-focus:   var(--blue-400);
  --rail-bg:       rgba(18, 25, 36, 0.72);
  --row-hover:     rgba(145, 179, 255, 0.07);
  --row-stripe:    rgba(145, 179, 255, 0.03);
  --divider:       rgba(145, 179, 255, 0.13);

  --text:          #e9eff8;
  --text-strong:   #ffffff;
  --text-muted:    #a3b4cb;
  --text-subtle:   #7787a0;
  --text-inverse:  #0c1018;
  --text-brand:    var(--blue-300);

  --brand:         var(--blue-400);
  --brand-strong:  var(--blue-300);
  --brand-deep:    var(--blue-200);
  --brand-soft:    rgba(47, 99, 240, 0.16);
  --brand-soft-2:  rgba(47, 99, 240, 0.26);
  --brand-ink:     #06102e;
  --brand-ring:    rgba(95, 139, 250, 0.35);
  --brand-grad:    linear-gradient(135deg, var(--blue-400), var(--blue-600));
  --brand-grad-soft: linear-gradient(135deg, rgba(47, 99, 240, 0.30), rgba(26, 159, 196, 0.22));

  --tint-success:     #57d3a3;
  --tint-success-bg:  rgba(14, 159, 110, 0.18);
  --tint-warning:     #f0b755;
  --tint-warning-bg:  rgba(214, 139, 22, 0.18);
  --tint-danger:      #f58b91;
  --tint-danger-bg:   rgba(216, 67, 76, 0.20);
  --tint-info:        #a49dff;
  --tint-info-bg:     rgba(107, 98, 232, 0.20);
  --tint-neutral:     #a3b4cb;
  --tint-neutral-bg:  rgba(163, 180, 203, 0.14);

  --series-1: #7ba2ff;
  --series-2: #4cc4e6;
  --series-3: #48c79a;
  --series-4: #a49dff;
  --series-5: #f0b755;
  --series-6: #f58b91;
  --series-7: #bdd3ff;
  --series-8: #a3b4cb;
  --grid-line: rgba(163, 180, 203, 0.16);
  --axis-text: #7787a0;
  --chart-fill-top: rgba(123, 162, 255, 0.34);
  --chart-fill-bottom: rgba(123, 162, 255, 0.02);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.42);
  --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.44);
  --shadow-3: 0 22px 52px rgba(0, 0, 0, 0.56);
  --shadow-glass: inset 0 1px 0 var(--glass-shine), 0 8px 26px rgba(0, 0, 0, 0.40);
  --ring: 0 0 0 3px var(--brand-ring);
}

/* Printed documents are always on white paper, whatever the screen theme. */
@media print {
  :root, :root[data-theme="dark"] {
    --app-bg: var(--paper);
    --panel-bg: var(--paper);
    --panel-solid: var(--paper);
    --text: var(--paper-ink);
    --text-strong: var(--paper-ink);
    --text-muted: var(--paper-muted);
    --panel-border: var(--paper-rule);
    --divider: var(--paper-rule);
    --qr-ink: #000000;
    --qr-bg: #ffffff;
  }
}