/* public/css/tokens.css */

:root {
  color-scheme: light dark;

  /* --- the brand, from the MijnChiptuning guidelines --- */
  --c-navy:       #002e6d;   /* the main brand colour, the app bar */
  --c-navy-light: #1e73be;   /* links and accents */
  --c-navy-dark:  #001d47;   /* the hover state */
  --c-brand-red:  #ff4546;   /* the call to action */
  --c-brand-green:#23A455;   /* success and the button hover */
  --c-on-brand:   #FFFFFF;   /* the ink on a navy fill or a red fill */

  /* --- neutral surfaces (light) --- */
  --c-bg:        #F1F3F5;
  --c-surface:   #FFFFFF;
  --c-sunken:    #E7EAEE;
  --c-line:      #D3D8DF;
  --c-line-soft: #E7EAEE;

  /* --- ink (light) --- */
  --c-text:      #14161A;   /* 16.6:1 on --c-surface */
  --c-text-2:    #4B535F;   /*  8.2:1 on --c-surface */
  --c-text-3:    #6B7382;   /*  4.8:1 on --c-surface, 14 px and larger only */
  --c-ink-hi:    #0B0C0E;   /* ink on every high-visibility fill */

  /* --- reserved fills --- */
  --c-ignition:  #ff4546;   /* primary button, status new */
  --c-ignition-press: #d93334;
  --c-plate:     #F7B500;   /* the plate only */
  --c-plate-band:#003399;   /* the blue band on the plate */
  --c-whatsapp:  #25D366;   /* the send button only */
  --c-whatsapp-press: #1DA851;

  /* --- status (light) --- */
  --c-new:       #ff4546;
  --c-new-ink:   #FFFFFF;
  --c-new-bg:    #ff4546;

  --c-ready:     #1e73be;
  --c-ready-ink: #002e6d;
  --c-ready-bg:  #E4EEF8;

  --c-sent:      #23A455;
  --c-sent-ink:  #177038;
  --c-sent-bg:   #E3F4EA;

  --c-done:      #6B7382;
  --c-done-ink:  #4B535F;
  --c-done-bg:   #E7EAEE;

  /* --- semantic --- */
  --c-danger:    #C81E1E;
  --c-danger-bg: #FBE6E6;
  --c-focus:     #1e73be;
  --c-scrim:     rgba(10, 12, 16, 0.45);

  /* --- type --- */
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-plate: "PlateNL", var(--font-ui);

  --fs-100: 0.75rem;   /* 12 px, uppercase meta only */
  --fs-200: 0.875rem;  /* 14 px, secondary text */
  --fs-300: 1rem;      /* 16 px, body, all inputs */
  --fs-400: 1.125rem;  /* 18 px, card title */
  --fs-500: 1.375rem;  /* 22 px, screen title */
  --fs-600: 1.75rem;   /* 28 px, price */
  --fs-700: 2.25rem;   /* 36 px, power values */

  --lh-tight: 1.15;
  --lh-snug:  1.30;
  --lh-base:  1.50;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   800;

  --ls-caps:  0.08em;
  --ls-plate: 0.04em;

  /* --- space, 4 px base --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* --- radius --- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 999px;

  /* --- shadow (light) --- */
  --sh-1: 0 1px 2px rgba(9,12,18,.08), 0 1px 1px rgba(9,12,18,.04);
  --sh-2: 0 4px 12px rgba(9,12,18,.10);
  --sh-3: 0 -8px 32px rgba(9,12,18,.18);

  /* --- motion --- */
  --dur-1: 90ms;    /* tap feedback */
  --dur-2: 140ms;   /* fade, toast, pill change */
  --dur-3: 190ms;   /* sheet, screen transition */
  --ease-out:      cubic-bezier(.2, .8, .28, 1);
  --ease-in:       cubic-bezier(.4, 0, 1, 1);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);

  /* --- size --- */
  --tap-min:   44px;
  --h-appbar:  52px;
  --h-tabbar:  56px;
  --h-action:  64px;
  --w-content: 720px;
  --w-rail:    232px;

  /* --- layer --- */
  --z-appbar:   40;
  --z-action:   50;
  --z-scrim:    55;
  --z-sheet:    60;
  --z-toast:    70;
}

/* --- dark theme, phone setting --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-navy:       #0A2E5C;   /* the app bar stays navy in the dark theme */
    --c-navy-dark:  #061F3F;

    --c-bg:        #0D0F12;
    --c-surface:   #16191E;
    --c-sunken:    #1E222A;
    --c-line:      #2C323C;
    --c-line-soft: #23282F;

    --c-text:      #F2F4F7;   /* 15.4:1 on --c-surface */
    --c-text-2:    #B3BAC5;   /*  8.1:1 on --c-surface */
    --c-text-3:    #8A93A0;   /*  4.9:1 on --c-surface */

    --c-ignition:  #FF6364;
    --c-ignition-press: #E04A4B;

    --c-ready:     #5A9FE0;
    --c-ready-ink: #A8CEFA;
    --c-ready-bg:  #132437;

    --c-sent:      #34C47C;
    --c-sent-ink:  #7FDCAC;
    --c-sent-bg:   #0F2A1E;

    --c-done:      #8A93A0;
    --c-done-ink:  #B3BAC5;
    --c-done-bg:   #23282F;

    --c-danger:    #FF6B6B;
    --c-danger-bg: #2A1416;
    --c-focus:     #7FB6F5;
    --c-scrim:     rgba(0, 0, 0, 0.62);

    --sh-1: 0 1px 2px rgba(0,0,0,.55);
    --sh-2: 0 4px 14px rgba(0,0,0,.55);
    --sh-3: 0 -8px 34px rgba(0,0,0,.70);
  }
}

/* --- dark theme, owner setting --- */
:root[data-theme="dark"] {
  --c-navy:       #0A2E5C;   /* the app bar stays navy in the dark theme */
  --c-navy-dark:  #061F3F;

  --c-bg:        #0D0F12;
  --c-surface:   #16191E;
  --c-sunken:    #1E222A;
  --c-line:      #2C323C;
  --c-line-soft: #23282F;

  --c-text:      #F2F4F7;
  --c-text-2:    #B3BAC5;
  --c-text-3:    #8A93A0;

  --c-ignition:  #FF6364;
  --c-ignition-press: #E04A4B;

  --c-ready:     #5A9FE0;
  --c-ready-ink: #A8CEFA;
  --c-ready-bg:  #132437;

  --c-sent:      #34C47C;
  --c-sent-ink:  #7FDCAC;
  --c-sent-bg:   #0F2A1E;

  --c-done:      #8A93A0;
  --c-done-ink:  #B3BAC5;
  --c-done-bg:   #23282F;

  --c-danger:    #FF6B6B;
  --c-danger-bg: #2A1416;
  --c-focus:     #7FB6F5;
  --c-scrim:     rgba(0, 0, 0, 0.62);

  --sh-1: 0 1px 2px rgba(0,0,0,.55);
  --sh-2: 0 4px 14px rgba(0,0,0,.55);
  --sh-3: 0 -8px 34px rgba(0,0,0,.70);
}