/* ORCA kit design tokens.
   Taken from the ORCA CITY Figma kit (xqJwrxbNN14zH1txxdkuvR) and rounded to whole design px
   for a 1920x1080 stage. Change the accent once through --acc-rgb; every tint follows it. */

:root {
  /* accent (cyan) and danger (red), as RGB triplets so tints can be written rgba(var(--acc-rgb), .27) */
  --acc-rgb: 115, 239, 255;
  --red-rgb: 255, 115, 115;
  --acc: rgb(var(--acc-rgb));          /* #73EFFF */
  --red: rgb(var(--red-rgb));          /* #FF7373 */
  --green: #5CFF7A;                    /* status dot "Waiting", up arrows */
  --gold: #FFC46B;                     /* rare accents only (rank, warning) */

  /* accent tints: the kit never adds a second hue, it varies the alpha */
  --acc-27: rgba(var(--acc-rgb), .27); /* hex badge, close button, active tab */
  --acc-17: rgba(var(--acc-rgb), .17); /* button inside a selected row */
  --acc-14: rgba(var(--acc-rgb), .14); /* selected card / menu item fill */
  --acc-10: rgba(var(--acc-rgb), .10); /* selected list row */
  --acc-04: rgba(var(--acc-rgb), .04); /* barely-there wash */
  --red-27: rgba(var(--red-rgb), .27);
  --red-17: rgba(var(--red-rgb), .17);
  --red-10: rgba(var(--red-rgb), .10);

  /* surfaces, darkest to lightest */
  --panel: #161718;                    /* every window */
  --chip: #1A1B1C;                     /* idle tab, key chip, number chip */
  --inset: #1C2125;                    /* dark end of the teal gradient */
  --well: rgba(42, 42, 42, .3);        /* list body and list rows */
  --card: #212121;                     /* menu cards, item cards, side panels */
  --box: #262626;                      /* inputs, totals, value boxes */
  --soft: rgba(136, 136, 136, .14);    /* secondary button */
  --line: #2A2A2A;                     /* outlines (table header, outlined inputs) */
  --teal: #29585E;                     /* middle of the primary gradient */
  --teal-2: #4396A0;

  /* text */
  --text: #FFFFFF;
  --text-2: #9C9C9C;                   /* subtitles next to a title */
  --text-3: #737373;                   /* labels such as "Total" */
  --text-num: #A6A6A6;                 /* row index numbers */
  --text-hint: #5C5C5C;                /* placeholders */

  /* primary action: dark - teal - dark, left to right */
  --grad-action: linear-gradient(90deg, var(--inset) 0%, var(--teal) 50%, var(--inset) 100%);
  /* selected item card: teal fading down */
  --grad-card: linear-gradient(180deg, rgba(var(--acc-rgb), .30) 0%, rgba(var(--acc-rgb), .06) 100%);
  /* hero glow behind a featured car or item */
  --grad-glow: radial-gradient(closest-side, rgba(67, 150, 160, .55), rgba(41, 88, 94, .15) 60%, transparent);

  /* radius */
  --r-chip: 6px;
  --r-btn: 8px;
  --r-row: 10px;
  --r-card: 16px;
  --r-well: 20px;
  --r-panel: 28px;

  /* the signature cut on the top-right corner */
  --cut-x: 56px;                       /* how far in from the right edge */
  --cut-y: 44px;                       /* how far down the right edge */

  /* type scale (px on the 1920 stage) */
  --fs-title: 24px;
  --fs-h2: 18px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-tiny: 11px;
  --fs-num: 28px;

  --font: 'Orca Sans', 'Inter', 'Noto Sans Thai', sans-serif;
  --ease: cubic-bezier(.2, .7, .3, 1);
}