/* =========================================================================
   The studio's palette, in one place.

   It lived inside studio.css until the start screen needed the same colors.
   Two files with the same twenty-five hex values is one file that will one
   day disagree with the other, so the tokens moved out here and both screens
   link this first.

   The COLORS are the app's (NinoPalette, in ui/theme/Color.kt). The design
   arrived with orange #ff7a45 as the highlight; here the highlight is the
   brand's purple. The map is below — each color from over there next to the
   one from over here.
   ========================================================================= */

:root {
  /* surfaces (NinoPalette) */
  --bg:         #0F0F12;   /* the deepest one, behind everything (design #0d0d10) */
  --canvas:     #141414;   /* NinoPalette.Canvas                                  */
  --bar:        #17171B;   /* NinoPalette.Bar — panels           (design #111116) */
  --card:       #1A1A1E;   /* NinoPalette.Card — top bar         (design #141419) */
  --raised:     #1D1D21;   /* NinoPalette.Raised — buttons       (design #1b1b22) */
  --divider:    #26262C;   /* NinoPalette.Divider                (design #24242c) */
  --border:     #2E2E38;   /* NinoPalette.Border                 (design #26262f) */

  /* content */
  --txt:        #F4F4F6;   /* ContentPrimary                                      */
  --txt2:       #C9C9D2;   /* ContentSecondary                                    */
  --txt3:       #8A8A93;   /* ContentMuted                                        */
  --txt4:       #75757E;   /* ContentSubtle                                       */
  --txt5:       #5E5E68;   /* ContentDisabled                                     */

  /* highlight — the brand's purple in place of the design's orange */
  --accent:     #8E4FF0;   /* NinoPalette.Accent                 (design #ff7a45) */
  --accent-alt: #7B3FDC;
  --accent-deep:#6C2BE0;   /* AccentDeep — the gradient's dark end                 */
  --accent-soft:#C6A9FF;   /* AccentSoft                                          */
  --accent-chip:#2A1D45;   /* AccentChip                                          */
  --accent-chip-border: #6C3BE0; /* AccentChipBorda                                */
  --ice:        #4FC3F7;   /* Gelo — the icon's blue                              */
  --sky:        #5AA8F0;   /* Ceu — the gradient's light end                      */
  --on-accent:  #FFFFFF;   /* OnAccent — the design used #1a0d06 over orange      */
  --danger:     #FC034A;   /* NinoPalette.Danger                                  */
  --ok:         #7FE0A8;

  /* NinoColors.GradienteMarca — AccentDeep → Accent → Ceu, the CTAs and the + */
  --brand-gradient: linear-gradient(135deg, #6C2BE0 0%, #8E4FF0 60%, #5AA8F0 100%);

  /* onion skin — desaturated on purpose, so they do not pass for ink */
  --onion-prev: #B05A5A;   /* OnionPrev  (the design used #ff5a5a)                */
  --onion-next: #5A8A62;   /* OnionNext  (the design used #4d9dff)                */
}

/* The brand's own face — NinoFonts.brand, the same file the app ships. It
   writes the word "NinoClip" and nothing else, here as there. */
@font-face {
  font-family: 'Oleo Script';
  src: url('../assets/oleo-script-bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}