@layer reset, tokens, base, shell, components, pages, utilities;

@layer tokens {
  :root {
    --font-sans: "Portal Sans", "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic", Tahoma, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

    /* Palette (all text pairs verified at WCAG 2.1 AA or better) */
    --navy-950: #081a2d;
    --navy-900: #0f2742;
    --navy-800: #16365a;
    --navy-700: #1f4a78;
    --navy-200: #b8c7da;
    --blue-700: #1b5aa6;
    --blue-800: #164c8d;
    --blue-600: #1f6fd1;
    --blue-100: #e6effb;
    --blue-50: #f2f7fd;
    --teal-700: #0a6763;
    --teal-100: #dcf1ef;
    --violet-700: #553a9f;
    --violet-100: #ede7fb;
    --rose-700: #9b2f66;
    --rose-100: #fbe7f0;
    --amber-800: #7a4a00;
    --amber-500: #c27c0e;
    --amber-100: #fff3dc;
    --red-700: #b3261e;
    --red-800: #a8231c;
    --red-600: #c0362c;
    --red-100: #fdeceb;
    --green-700: #17683c;
    --green-800: #125832;
    --green-100: #e3f4ea;
    --slate-900: #16202c;
    --slate-800: #243142;
    --slate-700: #3a4658;
    --slate-600: #526072;
    --slate-500: #647186;
    --slate-400: #8795a8;
    --slate-300: #c7cfda;
    --slate-200: #dfe4eb;
    --slate-150: #e8ecf1;
    --slate-100: #eef1f5;
    --slate-50: #f6f8fa;

    /* Semantic roles */
    --color-bg: #f4f6f9;
    --color-surface: #ffffff;
    --color-surface-muted: var(--slate-50);
    --color-border: var(--slate-200);
    --color-border-strong: var(--slate-400);
    --color-text: var(--slate-900);
    --color-text-muted: var(--slate-600);
    --color-text-subtle: var(--slate-500);
    --color-primary: var(--blue-700);
    --color-primary-hover: var(--blue-800);
    --color-primary-soft: var(--blue-100);
    --color-on-primary: #ffffff;
    --color-focus: var(--blue-600);
    --color-header: var(--navy-900);
    --color-header-text: #ffffff;
    --color-header-muted: var(--navy-200);

    --tone-info-fg: var(--blue-700);
    --tone-info-bg: var(--blue-100);
    --tone-success-fg: var(--green-700);
    --tone-success-bg: var(--green-100);
    --tone-warning-fg: var(--amber-800);
    --tone-warning-bg: var(--amber-100);
    --tone-danger-fg: var(--red-800);
    --tone-danger-bg: var(--red-100);
    --tone-neutral-fg: var(--slate-700);
    --tone-neutral-bg: var(--slate-100);

    /* Surfaces and states that differ between themes rather than being one fixed colour */
    --color-on-accent: #ffffff;
    --color-heading: var(--navy-900);
    --color-focus-ring-inset: #ffffff;
    --color-inverse-surface: var(--slate-900);
    --color-on-inverse: #ffffff;
    --color-approve: var(--green-700);
    --color-approve-hover: var(--green-800);
    --color-on-approve: #ffffff;
    --color-destructive: var(--red-700);
    --color-destructive-hover: var(--red-800);
    --color-on-destructive: #ffffff;
    --color-surface-translucent: rgb(255 255 255 / 0.94);
    --color-row-hover: #f8fafd;
    --color-decision-border: #c8d6ea;
    --color-chip-text: var(--blue-800);
    --color-focus-glow: rgb(31 111 209 / 0.25);
    --color-success-halo: rgb(23 104 60 / 0.06);
    --color-scrim: rgb(8 26 45 / 0.55);
    --color-scrim-soft: rgb(8 26 45 / 0.45);
    --color-shadow-strong: rgb(16 24 40 / 0.25);
    --color-skeleton: var(--slate-150);
    --color-skeleton-highlight: var(--slate-100);
    --color-viewer-stage: #ffffff;

    --color-notice-info-border: #b9d1f2;
    --color-notice-info-bg: var(--blue-50);
    --color-notice-success-border: #b7dfc7;
    --color-notice-success-bg: #f1faf4;
    --color-notice-warning-border: #f1d6a3;
    --color-notice-warning-bg: #fffaf0;
    --color-notice-danger-border: #f2c4c0;
    --color-notice-danger-bg: #fff6f5;

    /* Voucher type accents: colour is always paired with an icon and a text label */
    --type-document: var(--blue-700);
    --type-document-bg: var(--blue-100);
    --type-cashIn: var(--teal-700);
    --type-cashIn-bg: var(--teal-100);
    --type-cashOut: var(--violet-700);
    --type-cashOut-bg: var(--violet-100);
    --type-cashOutRequest: var(--rose-700);
    --type-cashOutRequest-bg: var(--rose-100);
    --type-other: var(--slate-600);
    --type-other-bg: var(--slate-100);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.125rem;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
    --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.08);
    --shadow-md: 0 4px 8px -2px rgb(16 24 40 / 0.08), 0 2px 4px -2px rgb(16 24 40 / 0.05);
    --shadow-lg: 0 20px 32px -8px rgb(16 24 40 / 0.18), 0 8px 12px -6px rgb(16 24 40 / 0.08);
    --focus-ring: 0 0 0 2px var(--color-focus-ring-inset), 0 0 0 4px var(--color-focus);

    --container-max: 80rem;
    --gutter: clamp(1rem, 3vw, 2rem);
    --touch-target: 2.75rem;
    --header-height: 4rem;
    --identity-bar-height: 3.5rem;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
  }

  /*
   * Dark theme. The ramps are re-pitched rather than inverted: a shade that carries text in the
   * light theme still carries text here, and a shade that fills a soft panel still fills one, so
   * every existing rule keeps its meaning. Text pairs were measured against the surface they sit
   * on and clear WCAG 2.1 AA (4.5:1 for text, 3:1 for borders and large text).
   *
   * The permanently dark parts of the page — the application header, the count badge on it — keep
   * the fixed --navy-* values and are deliberately not re-pitched.
   */
  :root[data-theme="dark"] {
    color-scheme: dark;

    /* Text ramp: darkest-is-strongest becomes lightest-is-strongest. */
    --slate-900: #eef3f9;
    --slate-800: #e2eaf3;
    --slate-700: #c3d0de;
    --slate-600: #a7b7c8;
    --slate-500: #91a3b7;
    --slate-400: #6b7c91;
    --slate-300: #46556a;
    --slate-200: #334153;
    --slate-150: #2b3849;
    --slate-100: #232f3f;
    --slate-50: #1b2534;

    /* Accents: the text shades lighten, the soft-panel shades darken. */
    --blue-800: #a8cdfa;
    --blue-700: #8ebdf7;
    --blue-600: #5fa3f0;
    --blue-100: #16324f;
    --blue-50: #142a41;
    --teal-700: #63cfc4;
    --teal-100: #0e3330;
    --violet-700: #b3a4f4;
    --violet-100: #241e42;
    --rose-700: #f294c0;
    --rose-100: #3a1a2c;
    --amber-800: #f3c469;
    --amber-500: #e0a53c;
    --amber-100: #3a2a0d;
    --red-800: #ffb0a8;
    --red-700: #ff9f96;
    --red-600: #ff8e84;
    --red-100: #3d1713;
    --green-800: #86e2b4;
    --green-700: #6ed6a4;
    --green-100: #0f3324;

    /* Semantic roles */
    --color-bg: #0c1420;
    --color-surface: #141d2b;
    --color-surface-muted: #1a2433;
    --color-border: #2a3749;
    --color-border-strong: #4a5b72;
    --color-text: var(--slate-900);
    --color-text-muted: var(--slate-600);
    --color-text-subtle: var(--slate-500);
    --color-heading: #f2f7fc;
    --color-primary: #7ab6f8;
    --color-primary-hover: #9cc9fa;
    --color-primary-soft: #16324f;
    --color-on-primary: #08182c;
    --color-focus: #8cc4ff;
    --color-focus-ring-inset: var(--color-bg);

    --tone-info-fg: var(--blue-700);
    --tone-info-bg: var(--blue-100);
    --tone-success-fg: var(--green-700);
    --tone-success-bg: var(--green-100);
    --tone-warning-fg: var(--amber-800);
    --tone-warning-bg: var(--amber-100);
    --tone-danger-fg: var(--red-800);
    --tone-danger-bg: var(--red-100);
    --tone-neutral-fg: var(--slate-700);
    --tone-neutral-bg: var(--slate-100);

    --type-document: var(--blue-700);
    --type-document-bg: var(--blue-100);
    --type-cashIn: var(--teal-700);
    --type-cashIn-bg: var(--teal-100);
    --type-cashOut: var(--violet-700);
    --type-cashOut-bg: var(--violet-100);
    --type-cashOutRequest: var(--rose-700);
    --type-cashOutRequest-bg: var(--rose-100);
    --type-other: var(--slate-600);
    --type-other-bg: var(--slate-100);

    /* A solid action keeps a dark label on a light fill so it stays the loudest thing on the page. */
    --color-approve: #3fb37a;
    --color-approve-hover: #56c78e;
    --color-on-approve: #04180f;
    --color-destructive: #e2635a;
    --color-destructive-hover: #ef7d74;
    --color-on-destructive: #1d0605;

    --color-on-accent: #08182c;
    --color-inverse-surface: #e7edf5;
    --color-on-inverse: #0c1420;
    --color-surface-translucent: rgb(20 29 43 / 0.94);
    --color-row-hover: #1b2635;
    --color-decision-border: #33465e;
    --color-chip-text: var(--blue-800);
    --color-focus-glow: rgb(140 196 255 / 0.28);
    --color-success-halo: rgb(110 214 164 / 0.10);
    --color-scrim: rgb(3 8 15 / 0.70);
    --color-scrim-soft: rgb(3 8 15 / 0.58);
    --color-shadow-strong: rgb(0 0 0 / 0.55);
    --color-skeleton: #222d3d;
    --color-skeleton-highlight: #2b3849;
    --color-viewer-stage: #101927;

    --color-notice-info-border: #24446a;
    --color-notice-info-bg: #132538;
    --color-notice-success-border: #1f5b41;
    --color-notice-success-bg: #10281e;
    --color-notice-warning-border: #6a4d16;
    --color-notice-warning-bg: #2c2210;
    --color-notice-danger-border: #6e2f2a;
    --color-notice-danger-bg: #2d1512;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.30);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.30);
    --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 20px 32px -8px rgb(0 0 0 / 0.60), 0 8px 12px -6px rgb(0 0 0 / 0.45);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-fast: 0ms;
      --duration-base: 0ms;
      --duration-slow: 0ms;
    }
  }
}