/* ============================================================================
   Design tokens — colour, type, space, radius and elevation, in two modes.
   ============================================================================

   These mirror the Figma file (VR Tours and Demo). The Core component library
   there is "surface-agnostic and resolves in either colour mode", so the same
   semantic names carry different values depending on the surface:

     dark   the tour — chrome floating over a photograph
     light  the marketing site

   Apply a mode with a class. The tour needs none: dark is the default on
   :root. A marketing page sets .theme-light on <body>, and a band inside it
   that is drawn dark — the hero, the CTA — sets .theme-dark back on itself.
   Everything beneath re-resolves, so a .btn in a dark band needs no variant.

   Values with no light entry are identical in both modes.
   ========================================================================== */

:root,
.theme-dark {

  /* ---------------------------------------------------------- background  */
  --bg:              #0d1117;                      /* night/700            */
  --bg-raised:       #0b0f16;                      /* alternating band     */
  --bg-deep:         #05070b;                      /* fade                 */
  --panel:           rgba(14, 20, 30, 0.86);       /* chrome over panorama */
  --scrim:           rgba(0, 0, 0, 0.72);          /* behind modal panels  */
  --sky-tint:        #16202e;                      /* first frame, pre-pano*/

  --control:         rgba(255, 255, 255, 0.09);
  --control-hover:   rgba(255, 255, 255, 0.16);
  --control-subtle:  rgba(255, 255, 255, 0.07);

  /* ---------------------------------------------------------------- text  */
  --ink:             #f4f7fb;
  --ink-dim:         rgba(244, 247, 251, 0.66);
  --ink-hover:       #ffffff;                      /* primary button hover */
  --ink-inverse:     #0b0f16;                      /* on --ink surfaces    */

  /* Foundations measured these two at 3.89:1 and 4.29:1 against --bg, both
     short of AA 4.5:1, and recorded 0.464 as the alpha that clears it. */
  --ink-mute:        rgba(244, 247, 251, 0.464);
  --ink-faint:       rgba(244, 247, 251, 0.464);

  /* ------------------------------------------------------------- borders  */
  --stroke:          rgba(255, 255, 255, 0.16);
  --stroke-strong:   rgba(255, 255, 255, 0.3);
  --border-subtle:   rgba(255, 255, 255, 0.09);
  --border-error:    rgba(255, 138, 128, 0.4);

  /* ------------------------------------------------- accent & 3D markers  */
  --accent:          #ffca6b;                      /* amber/400            */
  --accent-hover:    #ffd587;
  --accent-subtle:   #16202e;
  --on-accent:       #0b0f16;                      /* text on --accent     */
  --focus-ring:      #ffca6b;

  /* The section eyebrow is NOT simply the accent: amber on a dark band, but a
     muted grey on light pages — sampled from the rendered frames, where the
     light-mode accent (#a85f00) appears nowhere as an eyebrow. */
  --eyebrow:         #ffca6b;

  --marker-door:     #ffffff;
  --marker-note:     #ffca6b;
  --marker-plate:    rgba(0, 0, 0, 0.5);

  /* -------------------------------------------------------------- status  */
  --status-info-bg:      #16202e;
  --status-info-border:  #1b5fcc;
  --status-info-fg:      #2e7cf6;

  --status-ok-bg:        #0f2318;
  --status-ok-border:    #12a150;
  --status-ok-fg:        #3ddc97;

  --status-warn-bg:      #241a06;
  --status-warn-border:  #e0a33a;
  --status-warn-fg:      #ffca6b;

  --status-danger-bg:    #2a1316;
  --status-danger-border:#e5484d;
  --status-danger-fg:    #ff8a80;

  /* ------------------------------------------------------------- effects  */
  --shadow:         0 18px 48px rgba(0, 0, 0, 0.5);
  --shadow-1:       0 1px 2px rgba(10, 15, 26, 0.4);
  --shadow-2:       0 2px 6px -1px rgba(10, 15, 26, 0.5);
  --shadow-overlay: 0 24px 56px -8px rgba(10, 15, 26, 0.22);
}

/* ------------------------------------------------------------ light mode  */

.theme-light {
  --bg:              #ffffff;
  --bg-raised:       #f7f8fa;
  --bg-deep:         #eef0f4;
  --panel:           #ffffff;
  --scrim:           rgba(10, 15, 26, 0.45);
  --sky-tint:        #eef0f4;

  --control:         #ffffff;
  --control-hover:   #f1f3f7;
  --control-subtle:  #f8f9fb;

  --ink:             #10141b;
  --ink-dim:         #39424f;
  --ink-hover:       #1d2430;
  --ink-inverse:     #ffffff;
  --ink-mute:        #5c6675;
  --ink-faint:       #6b7482;

  --stroke:          #e5e8ee;
  --stroke-strong:   #d2d7e0;
  --border-subtle:   #eceef3;
  --border-error:    #e5484d;

  /* Amber at #ffca6b is 1.6:1 on white. The light mode darkens it to a shade
     that still reads as the same accent but clears AA as text. */
  --accent:          #a85f00;
  --accent-hover:    #e0a33a;
  --accent-subtle:   #fff6e5;
  --on-accent:       #ffffff;
  --focus-ring:      #a85f00;
  --eyebrow:         #78818f;

  --status-info-bg:      #e9f1fe;
  --status-info-border:  #2e7cf6;
  --status-info-fg:      #1b5fcc;

  --status-ok-bg:        #e8f7ee;
  --status-ok-border:    #12a150;
  --status-ok-fg:        #0b7a3c;

  --status-warn-bg:      #fff6e5;
  --status-warn-border:  #e0a33a;
  --status-warn-fg:      #a85f00;

  --status-danger-bg:    #fdecec;
  --status-danger-border:#e5484d;
  --status-danger-fg:    #c0272d;

  --shadow:         0 18px 48px rgba(10, 15, 26, 0.12);
  --shadow-1:       0 1px 2px rgba(10, 15, 26, 0.06), 0 0 1px rgba(10, 15, 26, 0.04);
  --shadow-2:       0 2px 6px -1px rgba(10, 15, 26, 0.08), 0 0 1px rgba(10, 15, 26, 0.04);
  --shadow-overlay: 0 24px 56px -8px rgba(10, 15, 26, 0.22);
}

/* ------------------------------------------------------- immersive mode  */

/* Section 11 · Design direction · Immersive. The file's own claim about it is
   the whole point: "Rangi zote ni tokeni zilezile — mode mpya tu. Skrini
   yoyote inaweza kubadilishwa bila kuhariri chochote." Every value below is
   one of the same semantic names the other two modes define, so no screen,
   component or stylesheet knows this mode exists.

   Four ramps, taken from the file's Palette · Immersive frame:

     VOID   900 #05060b  800 #0a0c14  700 #101423
            600 #171c30  500 #222842  400 #2e3654
     LILAC  600 #6b33d6  500 #8f5cf0  400 #b694ff  300 #d9c6ff
     TEAL   500 #0fa995  400 #25d7c0  300 #6fefdc  200 #b4fbf0
     PEARL  500 #616a8c  400 #868fb2  300 #aeb5d2  200 #d5d9ec  100 #eef0fa

   Unlike dark mode, the surfaces here are opaque. Dark mode layers white at
   7/9/16% over the page; stacking those over near-black would give three
   surfaces nobody can tell apart, so each one is a step on the void ramp
   instead. Run `node scripts/contrast.js immersive` after changing any of it.
   ------------------------------------------------------------------------ */

/* The nested selectors are not decoration. Dark mode's own note explains
   that a light page can carry a dark band — the hero, the CTA — by setting
   .theme-dark back on itself, and those bands re-resolve every token
   beneath them. Inside an immersive page that would re-pin the dark
   palette, and the landing page's eyebrow came back amber on the first
   try. Immersive has no light and dark halves to switch between, so a
   nested mode class inside it is simply inert — which is what keeps the
   file's "skrini yoyote ... bila kuhariri chochote" true for pages that
   use those bands. */
.theme-immersive,
.theme-immersive .theme-dark,
.theme-immersive .theme-light {

  /* ---------------------------------------------------------- background  */
  --bg:              #05060b;                      /* void/900             */
  --bg-raised:       #05060b;                      /* flat: see the note   */
  --bg-deep:         #0a0c14;                      /* void/800             */
  --panel:           #101423;                      /* void/700             */
  --scrim:           rgba(5, 6, 11, 0.55);
  --sky-tint:        #171c30;                      /* void/600             */

  --control:         #171c30;                      /* void/600             */
  --control-hover:   #222842;                      /* void/500             */
  --control-subtle:  #0a0c14;                      /* void/800             */

  /* ---------------------------------------------------------------- text  */
  --ink:             #eef0fa;                      /* pearl/100            */
  --ink-dim:         #aeb5d2;                      /* pearl/300            */
  --ink-hover:       #ffffff;
  --ink-inverse:     #05060b;                      /* void/900             */
  --ink-mute:        #868fb2;                      /* pearl/400            */

  /* The file puts pearl/500 #616a8c here, and measured it is 3.81:1 on the
     page and 3.44:1 on a panel — short of AA either way, and this token
     carries real sentences (field hints, the "kutoka 1,142" under a tile).
     So faint and mute are the same pearl/400 in this mode, which costs the
     design one step of text hierarchy and is the right trade. */
  --ink-faint:       #868fb2;                      /* pearl/400, see above */

  /* ------------------------------------------------------------- borders  */
  --stroke:          #222842;                      /* void/500             */
  --stroke-strong:   #2e3654;                      /* void/400             */
  --border-subtle:   rgba(255, 255, 255, 0.09);
  --border-error:    rgba(255, 138, 128, 0.4);

  /* ------------------------------------------------- accent & 3D markers  */
  --accent:          #b694ff;                      /* lilac/400            */
  --accent-hover:    #d9c6ff;                      /* lilac/300            */
  --accent-subtle:   #171c30;                      /* void/600             */
  --on-accent:       #05060b;                      /* void/900             */
  --focus-ring:      #b694ff;
  --eyebrow:         #b694ff;

  --marker-door:     #eef0fa;                      /* pearl/100            */
  --marker-note:     #b694ff;                      /* lilac/400            */
  --marker-plate:    rgba(5, 6, 11, 0.55);

  /* -------------------------------------------------------------- status  */
  /* Every status background collapses to void/600, as the file has it, and
     the foreground carries the meaning. Success moves to teal; warning and
     danger keep their hues, because a palette does not get to decide that
     a warning is lilac. */
  --status-info-bg:      #171c30;
  --status-info-border:  #6b33d6;                  /* lilac/600            */
  --status-info-fg:      #b694ff;                  /* lilac/400            */

  --status-ok-bg:        #171c30;
  --status-ok-border:    #0fa995;                  /* teal/500             */
  --status-ok-fg:        #6fefdc;                  /* teal/300             */

  --status-warn-bg:      #171c30;
  --status-warn-border:  #e0a33a;
  --status-warn-fg:      #ffca6b;

  --status-danger-bg:    #171c30;
  --status-danger-border:#e5484d;
  /* The file shows #e5484d as the danger text too; on void/600 that measures
     4.31:1, under AA. Dark mode's lighter red clears it at 7.39:1 and reads
     as the same colour, so it stays. */
  --status-danger-fg:    #ff8a80;

  /* ------------------------------------------------------------- effects  */
  --shadow:         0 18px 48px rgba(0, 0, 0, 0.6);
  --shadow-1:       0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2:       0 2px 6px -1px rgba(0, 0, 0, 0.55);
  --shadow-overlay: 0 24px 56px -8px rgba(10, 15, 26, 0.22);

  /* The two fields that sit behind the content on the landing page. They are
     the only thing this mode adds that is not a recolour; css/base.css paints
     them, so no page markup changes. */
  --glow-lilac:     rgba(182, 148, 255, 0.30);
  --glow-teal:      rgba(111, 239, 220, 0.24);

  /* On a photograph the accent is lilac here too, so a property card's tag
     agrees with the markers inside the tour it links to. */
  --on-media-accent: #b694ff;

  --wash-top:        #222842;                      /* void/500             */
  --wash-mid:        #0a0c14;                      /* void/800             */
  --wash-deep:       #05060b;                      /* void/900             */
}

/* ---------------------------------------------- mode-independent values  */

:root {

  /* ---------------------------------------------------------- typography  */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, monospace;

  --text-overline:   11px;
  --text-mono-sm:    11px;
  --text-body-sm:    13px;
  --text-label-md:   14px;
  --text-body-md:    15px;
  --text-label-lg:   15px;
  --text-heading-sm: 18px;
  --text-card-title: 19px;

  /* --------------------------------------------------------------- space  */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 40px;

  /* Viewport chrome insets, kept separate from the ramp above because they
     are tuned against the safe-area rather than the layout grid. */
  --inset:     18px;

  /* -------------------------------------------------------------- radius  */
  --radius-xs:  4px;
  --radius-sm:  10px;
  --radius-md:  12px;
  --radius:     14px;    /* info, help and error cards                      */
  --radius-lg:  16px;    /* modal panels, marketing cards                   */
  --radius-pill: 999px;

  /* ------------------------------------------------------------- control  */
  --control-sm: 36px;
  --control-md: 44px;    /* default: meets the 44px touch target            */
  --control-lg: 52px;

  /* --------------------------------------------------------------- blur   */
  --blur-chrome: 14px;
  --blur-card:   22px;

  /* ---------------------------------------------------------- dark wash  */
  /* The decorative gradients: the auth panel, the directory's photo
     placeholder, the marketing hero's backdrop. They stay dark in every mode
     because they stand in for a photograph, so they cannot use --bg or
     --panel, which invert in light mode. Immersive re-points them at the
     void ramp, which is the difference between the mode covering the
     product and covering most of it.

     The two existing modes keep the values they had, to within the 6/255
     the auth panel's top stop moves — it and the directory's were hand-
     tuned a hair apart and are now one token. */
  --wash-top:        #1b2740;
  --wash-mid:        #0d1117;
  --wash-deep:       #080b10;

  /* ------------------------------------------------------------ on media  */
  /* Text laid over a photograph. It cannot use --ink or --accent, because
     both go dark in light mode and a photo's scrim stays dark in every mode,
     so these are fixed rather than mode-resolved. Immersive overrides the
     accent one, since the whole point of that mode is that the accent is
     lilac — and the tour's own markers already follow it. */
  --on-media:        #f4f7fb;
  --on-media-accent: #ffca6b;

  /* Secondary text on one of those washes. The auth panel's attribution was
     #808080, which measures 3.77:1 on the wash and 3.67:1 once immersive
     lightens its top stop — under AA in all three modes. pearl/300 clears it
     at 7.13:1 and still reads as the quieter line. */
  --on-media-dim:    #aeb5d2;

  /* ----------------------------------------------------------- safe area  */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}