/* V4 design tokens (the owner's design "V4", design_handoff_v4/README.md). Every colour, radius, size and timing
   used by the shell, the shared components and the pages comes from here. Change the brand colour with --ac only. */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #000000;
  --card: #1C1C1C;
  --card-2: #262626;          /* inner tiles, chips on cards, the segmented-control track */
  --card-hover: #242424;      /* KPI card hover (design: style-hover background #242424) */
  --raised: #3A3A3A;          /* raised dark tile (weak topics), ring track, prev/next buttons */
  --divider: #2E2E2E;
  --track: #2A2A2A;           /* bar tracks, remove buttons */
  --dot-off: #5A5A5A;         /* inactive carousel dots, neutral bars, "area" bars */
  --line-soft: #4A4A4A;       /* diverging bars' zero line */

  /* Text */
  --text: #FFFFFF;
  --muted: #B5B5B5;
  --muted-2: #8C8C8C;
  --soft: #D6D6D6;            /* legends */
  --soft-2: #E0E0E0;          /* tip box text, chip text on #2A2A2A */
  --soft-3: #EDEDED;          /* review text inside the drawer; light track on white cards */
  --ink: #000000;             /* text on accent / white / pale tiles */
  --ink-2: #333333;           /* secondary text on light tiles */
  --ink-3: #555555;           /* tertiary text on white cards */

  /* Brand accent (tweakable: #3BE33B, #C6F432, #7DD3FC, #FF8A3D were tried) */
  --ac: #3BE33B;
  --ac-55w: color-mix(in oklch, var(--ac) 55%, white);
  --ac-85w: color-mix(in oklch, var(--ac) 85%, white);
  --ac-75b: color-mix(in oklch, var(--ac) 75%, black);
  --ac-45b: color-mix(in oklch, var(--ac) 45%, black);
  --ac-70w: color-mix(in oklch, var(--ac) 70%, white);   /* stacked-area layers (dashboard aside) */
  --ac-45w: color-mix(in oklch, var(--ac) 45%, white);
  --ac-22d: color-mix(in oklch, var(--ac) 22%, #1C1C1C);
  --ac-fill: color-mix(in srgb, var(--ac) 12%, transparent);  /* line-chart area fill (fill-opacity .12) */
  /* The logo's colour (the .bm / .bf masks in base.css): the bright accent on dark; on a light surface (.on-light, and
     any future light theme) the darker green --good-ink, which reads on white (about 5:1) */
  --logo-ac: var(--ac);

  /* Light tiles (topic tile colour rule: >=8 accent, 7-8 pale, 6-7 grey-2, <6 raised) */
  --white: #FFFFFF;
  --pale: #DDE3E3;
  --grey: #BDBDBD;
  --grey-2: #A3A3A3;
  --light-track: #EDEDED;     /* bars on white cards */
  --light-row: #F1F1F1;       /* list rows on white cards */
  --light-row-hover: #E6E6E6;

  /* Feelings */
  --bad: #FF7A5C;             /* complaint / negative fills */
  --bad-text: #FF9A80;        /* complaint text on dark */
  --bad-ink: #B23A1E;         /* complaint text on light cards */
  --bad-warn: #E0552F;        /* warning icon on white */
  --good-text: #7CF07C;       /* praise text on dark */
  --good-ink: #1B7A1B;        /* praise text on light cards */
  --tag-good: color-mix(in srgb, var(--ac) 16%, transparent);   /* rgba(59,227,59,.16) */
  --tag-bad: rgba(255, 122, 92, .18);
  --tag-mixed: rgba(255, 255, 255, .10);

  /* Alert cards (login / errors, design "V4 Start") */
  --alert-red-bg: rgba(255, 122, 92, .14);
  --alert-red-text: #FFB3A1;
  --alert-amber-bg: rgba(255, 206, 92, .12);
  --alert-amber-text: #F2D27A;
  --alert-amber: #F2C14E;
  --whatsapp: #25D366;

  /* Fonts */
  --font-ui: 'Alexandria', system-ui, sans-serif;
  --font-num: 'Urbanist', sans-serif;

  /* Type scale */
  --fs-hero: 60px;            /* reviews growth number (52 on phone) */
  --fs-kpi: 38px;             /* KPI numbers (34 on phone) */
  --fs-tile: 42px;            /* topic tile scores */
  --fs-stat: 30px;            /* chart summary numbers (24 on phone) */
  --fs-title: 32px;           /* page title h1 (26 on phone) */
  --fs-h2: 22px;
  --fs-section: 20px;         /* card titles (18 on phone) */
  --fs-body: 15px;
  --fs-ui: 14px;
  --fs-meta: 13px;
  --fs-small: 12px;
  --fs-tiny: 11px;

  /* Radii */
  --r-pill: 99px;
  --r-shell: 30px;            /* sidebar, dashboard aside, big sections */
  --r-sheet: 28px;
  --r-card: 24px;
  --r-tile: 22px;
  --r-tile-sm: 20px;
  --r-inner: 16px;
  --r-chip: 14px;
  --r-menu: 18px;
  --r-menu-item: 12px;

  /* Spacing */
  --page-pad: 20px;           /* 14px on phone */
  --gap: 10px;                /* grids */
  --gap-section: 18px;        /* between sections (12 on phone) */
  --card-pad: 20px 22px;
  --sb-full: 248px;
  --sb-thin: 84px;

  /* Sizes */
  --hit: 44px;
  --hit-lg: 52px;

  /* Motion (the design's own) */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --t-fast: 120ms;            /* hover, nav background */
  --t-tab: 200ms;             /* phone tab bar flex */
  --t-sb: 240ms;              /* sidebar width */
  --t-sheet: 320ms;           /* drawer / sheet / scrim */
  --t-bar: 600ms;             /* bar heights */
  --t-enter: 320ms;           /* page enter */

  /* Floating menus only (the design's period menu and the Ask input float with this; cards never have shadows) */
  --float-shadow: 0 20px 40px rgba(0, 0, 0, .6);

  /* Reading direction (<html dir>, js/lang.js + core/i18n.js): the design is right-to-left (Arabic); English turns it
     around. --flip is 1 in Arabic and -1 in English: multiply a sideways move by it,
     e.g. transform: translateX(calc(-110% * var(--flip))). Rules for the pages: docs/I18N_V4.md "Direction". */
  --flip: 1;
}
:root[dir="ltr"] { --flip: -1; }
.on-light, :root[data-theme="light"] { --logo-ac: var(--good-ink); }

@media (max-width: 700px) {
  :root {
    --page-pad: 14px;
    --gap-section: 12px;
    --fs-hero: 52px;
    --fs-kpi: 34px;
    --fs-tile: 30px;
    --fs-stat: 24px;
    --fs-title: 26px;
    --fs-section: 18px;
    --card-pad: 16px 18px;
  }
}