/* =============================================================================
   Liberty Studios: the token system, shared by every page.

   The night look the home page set: a deep indigo page, a few lifted steps of
   the same hue for the panels, hairlines in a pale violet at low alpha, a yellow
   for the one primary action on a screen, and a violet for selection, focus and
   Export. The 3D stages stay neutral grey on purpose: a weapon's colour is
   judged there, and a tinted light would lie about it.
   Every other stylesheet names these tokens and never a colour of its own.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Type faces, self-hosted (font-src is 'self'). Both are SIL OFL 1.1; the licences are in
   public/fonts/. Almarai sets the text, El Messiri the headings. Each comes as an Arabic and a
   Latin file, so a page only downloads the script it shows. El Messiri is one variable file.
   ----------------------------------------------------------------------------- */
@font-face { font-family: 'Almarai'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/almarai-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Almarai'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/almarai-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Almarai'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/almarai-700-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Almarai'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/almarai-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'El Messiri'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/el-messiri-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'El Messiri'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/el-messiri-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* ---- surfaces, darkest to lightest ---------------------------------- */
  --bg:         #08071b;   /* the page itself                         */
  --bg-2:       #100e28;   /* the docked panels                       */
  --panel:      #161436;
  --panel-2:    #211f47;   /* inputs, a control on a panel            */
  --raised:     #2e2b5a;   /* hover, the active row                   */
  --bar:        #0f0d27;   /* the top bar strip, the floating bars    */
  --well:       #070617;   /* a field sunk into a panel (the prompt)  */

  /* ---- the night: the home page's stage and its ambient light ------- */
  --night:      #07061a;
  --night-2:    #0d0b26;
  --night-card: #110f2c;
  --night-line: rgb(168 158 255 / 0.14);
  --night-lit:  rgb(168 158 255 / 0.3);
  --glass:      rgb(22 19 56 / 0.62);
  --aura: radial-gradient(70% 60% at 50% -10%, rgb(108 91 255 / 0.16), transparent 70%);

  /* ---- lines: white at low alpha, so an edge belongs to its surface ---- */
  --border:      rgb(178 170 255 / 0.16);
  --border-soft: rgb(178 170 255 / 0.1);
  --border-lit:  rgb(178 170 255 / 0.3);

  /* ---- text: three steps ----------------------------------------------- */
  --text:       #ffffff;
  --text-dim:   rgb(255 255 255 / 0.84);
  --text-faint: rgb(255 255 255 / 0.62);

  /* ---- primary: the one yellow button a screen has --------------------- */
  --primary:      #f9cf00;
  --primary-2:    #ffdb2e;
  --primary-grad: linear-gradient(180deg, #ffdc1f 0%, #f9cf00 100%);
  --primary-glow: rgb(249 207 0 / 0.28);
  --on-primary:   #1a1500;

  /* ---- accent: selection, focus, Export -------------------------------- */
  --accent:      #6c5bff;
  --accent-2:    #9d90ff;   /* accent as text or a line on a dark surface */
  --accent-fill: #503be3;   /* a filled button                            */
  --accent-soft: rgb(108 91 255 / 0.2);
  --pink:        linear-gradient(90deg, #f57578 0%, #ec4899 100%);
  --accent-glow: rgb(80 59 227 / 0.4);
  --on-accent:   #ffffff;

  /* ---- status --------------------------------------------------------- */
  --ok:     oklch(0.75 0.16 155);
  --warn:   oklch(0.80 0.15  75);
  --danger: oklch(0.68 0.19  20);

  /* ---- shape: controls 12, containers 16, buttons that act are pills --- */
  --r-control: 12px;
  --r-card:    16px;
  --r-pill:    999px;

  /* ---- type: Almarai for text, El Messiri for headings (see @font-face above) ---- */
  --font:    'Almarai', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-display: 'El Messiri', 'Almarai', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, Menlo, monospace;
  --track-display: -0.01em;

  /* ---- depth ----------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 8px 24px rgb(0 0 0 / 0.5);
  --shadow-3: 0 24px 64px rgb(0 0 0 / 0.6);

  /* the little spheres that pick a display mode */
  --ball-shaded:   radial-gradient(circle at 35% 30%, #ffffff 0%, #c9cbd0 36%, #55585e 100%);
  --ball-wire:     repeating-linear-gradient(0deg, #9a9da3 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, #9a9da3 0 1px, transparent 1px 5px), radial-gradient(circle at 35% 30%, #4a4c52, #1b1d20);
  --ball-clay:     radial-gradient(circle at 35% 30%, #f6d2ad 0%, #cc8446 52%, #6b3d18 100%);
  --ball-textured: conic-gradient(from 210deg, #ff5f6d, #ffc371, #47e891, #4facfe, #b06ab3, #ff5f6d);

  /* the 3D stage and the dim behind a dialog */
  --stage-hi: #3d3f42;
  --stage-mid: #27292c;
  --stage-lo: #0e0e10;
  --scrim: rgb(0 0 0 / 0.7);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* A hairline, not a 1px line. Borders at exactly 1px on a dark surface read
   heavier than they measure; 0.8px is what the reference uses and it is the
   difference between "outlined" and "edged". */
.hair { border: 0.8px solid var(--border); }

/* -----------------------------------------------------------------------------
   Aliases the editor stylesheet already asks for by name. Kept here rather than
   renamed across 1,400 lines of working CSS: a sweeping find-and-replace
   through a file that draws a 3D viewport and a UV canvas is a lot of risk for
   a cosmetic tidy.
   ----------------------------------------------------------------------------- */
:root {
  --radius: var(--r-card);   /* the editor's one radius; now matches the cards */
  --line:   var(--border-lit);
}

/* -----------------------------------------------------------------------------
   Native controls.

   Checkboxes, radios and the scrollbar are drawn by the browser, not by this
   stylesheet — so on a dark page they came out in the OS's light chrome, pale
   and obviously borrowed. Two declarations fix all of them:

   color-scheme tells the browser the page IS dark, so it picks its dark
   rendering for every native widget including form controls and the default
   scrollbar. accent-color then paints the checked state in the product's own
   colour rather than the system blue.
   ----------------------------------------------------------------------------- */
:root {
  color-scheme: dark;
  accent-color: var(--accent);
}

/* -----------------------------------------------------------------------------
   Icons.

   Line icons at a single weight, drawn in currentColor so they take the colour
   of whatever they sit in. They replaced emoji, which were doing real damage:
   an emoji is rendered by the operating system, so it arrives at a size, weight
   and colour palette nothing on the page chose — full-colour cartoons on a
   restrained dark interface. They also read instantly as filler.
   ----------------------------------------------------------------------------- */
.icon     { width: 22px; height: 22px; display: block; }
.icon-sm  { width: 15px; height: 15px; display: block; flex: none; }