/*
  Fikrtna Drama — design tokens (clean studio look)
  Neutral near-black surfaces, white text, and white as the one action colour. No decoration: the generated
  pictures and clips are the only colour on screen. Text tokens are ≥ 4.5:1 on --ink-surface and darker.

  The names are historical (the first look was navy and gold): "--gold" now means "the action colour" (white)
  and "--gold-ink" the text on it. Renaming them would touch every stylesheet for no visible gain.
*/
:root {
  /* Brand core (the logo keeps its own colours) */
  --brand-navy:  #141416;
  --brand-gold:  #FFFFFF;
  --brand-white: #FFFFFF;

  /* Ink scale — neutral, darkest to lightest */
  --ink-abyss:   #0A0A0B;  /* deepest: canvas board, letterbox      */
  --ink-well:    #101012;  /* wells, inputs                         */
  --ink-bg:      #141416;  /* page background                       */
  --ink-surface: #1C1C1F;  /* cards, panels                         */
  --ink-raised:  #26262A;  /* hover, selected rows, popovers        */
  --ink-lift:    #313136;  /* pressed / highest surface             */

  /* Hairlines */
  --line-soft:   #232327;
  --line:        #2E2E33;
  --line-strong: #4A4A52;

  /* Text — contrast on --ink-surface: 16.6 / 14.4 / 8.4 / 5.9 / 4.8 */
  --fg:        #FFFFFF;
  --fg-2:      #EDEDEF;
  --fg-muted:  #B8B8BF;
  --fg-subtle: #9A9AA2;
  --fg-faint:  #8B8B93;

  /* The action colour: white, with near-black text on it */
  --gold:       #FFFFFF;
  --gold-hi:    #E4E4E7;
  --gold-deep:  #D4D4D8;
  --gold-ink:   #0A0A0B;
  --gold-wash:  rgba(255, 255, 255, .08);
  --gold-line:  rgba(255, 255, 255, .28);
  --gold-sheen: linear-gradient(120deg, #FFFFFF 0%, #F4F4F5 46%, #D4D4D8 100%);

  /* Status tints */
  --tint-ember: #F2A37A;
  --tint-mist:  #8FC8E8;
  --tint-teal:  #4EC3B4;
  --tint-gold:  #FFFFFF;

  /* Status */
  --danger:      #FF8A70;
  --danger-soft: #FFB4A2;
  --ok:          #5FD3A4;

  /* Shape */
  --r-card:    16px;
  --r-media:   12px;
  --r-control: 12px;
  --r-chip:    999px;

  /* Depth */
  --shadow-pop:  0 24px 60px -18px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 40px -28px rgba(0, 0, 0, .8);
  --glow-gold:   0 0 0 1px rgba(255, 255, 255, .2);

  /* Motion */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-film: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .14s;
  --dur-2: .24s;
  --dur-3: .5s;

  /* Type — one sans for everything; mono only where digits must line up */
  --font-display: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic:  'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;
}