/* ==========================================================================
   AT Productions — design tokens
   Light by default, dark via prefers-color-scheme, manual override wins both ways.
   ========================================================================== */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Colour — light
   #C60C30 is the brand red used by the Android theme, the launcher background
   and the hardcoded iOS accents. The correct/pass green is deliberately darker
   than the apps' #34C759, which only reaches 2.2:1 on white.
   -------------------------------------------------------------------------- */
:root {
  --paper:        #f5f5f7;
  --surface:      #ffffff;
  --surface-sunk: #ebebef;
  --ink:          #1c1c1e;
  --ink-muted:    #6e6e73;
  --hairline:     #d2d2d7;

  --red:          #c60c30;
  --red-hover:    #a80a29;
  --red-wash:     rgba(198, 12, 48, 0.08);
  --on-red:       #ffffff;

  --green:        #248a3d;
  --green-wash:   rgba(36, 138, 61, 0.10);
  --amber:        #8a5a00;
  --amber-wash:   rgba(138, 90, 0, 0.10);

  /* Informational accent. Red is reserved for the brand mark, primary actions
     and right/wrong verdicts, so category text never reads as an error. */
  --sea:          #1f5e7a;
  --sea-wash:     rgba(31, 94, 122, 0.10);

  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.05);
  --shadow-lift:  0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 0, 0, 0.09);

  color-scheme: light;
}

/* Dark — automatic, unless the visitor has explicitly chosen light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper:        #0b0b0c;
    --surface:      #1c1c1e;
    --surface-sunk: #131315;
    --ink:          #f5f5f7;
    --ink-muted:    #a1a1a6;
    --hairline:     #38383a;

    --red:          #ff4d6d;
    --red-hover:    #ff7189;
    --red-wash:     rgba(255, 77, 109, 0.14);
    --on-red:       #1c1c1e;

    --green:        #34c759;
    --green-wash:   rgba(52, 199, 89, 0.16);
    --amber:        #ffb340;
    --amber-wash:   rgba(255, 179, 64, 0.16);

    --sea:          #7fc4e0;
    --sea-wash:     rgba(127, 196, 224, 0.14);

    --shadow-card:  none;
    --shadow-lift:  0 12px 32px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
  }
}

/* Dark — explicitly chosen, must beat the media query above */
:root[data-theme='dark'] {
  --paper:        #0b0b0c;
  --surface:      #1c1c1e;
  --surface-sunk: #131315;
  --ink:          #f5f5f7;
  --ink-muted:    #a1a1a6;
  --hairline:     #38383a;

  --red:          #ff4d6d;
  --red-hover:    #ff7189;
  --red-wash:     rgba(255, 77, 109, 0.14);
  --on-red:       #1c1c1e;

  --green:        #34c759;
  --green-wash:   rgba(52, 199, 89, 0.16);
  --amber:        #ffb340;
  --amber-wash:   rgba(255, 179, 64, 0.16);

  --sea:          #7fc4e0;
  --sea-wash:     rgba(127, 196, 224, 0.14);

  --shadow-card:  none;
  --shadow-lift:  0 12px 32px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Type — Schibsted Grotesk for display, the system stack for running text
   (renders as SF Pro on Apple devices, which is where most visitors are).
   -------------------------------------------------------------------------- */
:root {
  --font-display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.50rem, 1.34rem + 0.78vw, 2.00rem);
  --step-3:  clamp(1.90rem, 1.58rem + 1.55vw, 2.90rem);
  --step-4:  clamp(2.40rem, 1.78rem + 3.05vw, 4.30rem);

  --measure: 68ch;
}

/* --------------------------------------------------------------------------
   Space, shape, motion
   -------------------------------------------------------------------------- */
:root {
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 980px;

  --shell: 1120px;
  --shell-narrow: 720px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 260ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}