/*
  CineNote design tokens.

  The brand palette is fixed across themes (#445755 stage, #D6DCDC soft, #014B43 header,
  #F6C445 yellow, #7A1E1E red). The client theme is personalizable: every colour is exposed
  as a CSS custom property and is never wired directly into a component. Light is the base
  (:root). There is a single theme; per-customer branding overrides the brand slots at runtime.

  The layout and navigation components consume the semantic --color-*, --font-*,
  --space-* and --radius-* tokens defined here. FluentUI design tokens (--accent-fill-*,
  --neutral-*, --type-ramp-*) stay owned by FluentDesignTheme.

  Display font = Plus Jakarta Sans, body font = Noto Sans, both self-hosted below.
*/

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/PlusJakartaSans-Variable.ttf") format("truetype");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans";
    src: url("../fonts/NotoSans-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /*
      Single theme. The product has one look — the dark-green header over the muted green-grey
      stage from the original design — and no light/dark switch: a second palette doubled every
      contrast decision and kept drifting from the reference. Per-customer branding is a separate
      mechanism and still fully supported: it overrides the --color-brand-* slots below.
    */
    color-scheme: light;

    --color-bg-surface: #D6DCDC;
    --color-bg-surface-alt: #f4f6f6;
    --color-bg-elevated: #ffffff;
    --color-bg-elevated-alt: #f4f6f6;
    --color-bg-hover: rgba(1, 75, 67, 0.06);
    --color-bg-selected: #e3efe9;

    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a5856;
    --color-text-muted: #6d7775;
    --color-text-on-brand: #ffffff;

    --color-border: #c2c9c8;
    --color-border-strong: #9aa3a2;
    --color-border-focus: #014B43;

    --color-accent: #014B43;

    /* Inline link text: a shade lighter than the brand green so it reads as a link. */
    --color-link: #01695e;
    --color-link-hover: #014B43;

    --color-danger: #7A1E1E;
    --color-danger-bg: #f0d6d6;

    --color-status-success-bg: #e3efe9;
    --color-status-success-text: #014B43;
    --color-status-warning-bg: #fbe9c2;
    --color-status-warning-text: #7a5b00;
    --color-status-danger-bg: #f0d6d6;
    --color-status-danger-text: #7A1E1E;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-video: 0 12px 32px rgba(0, 0, 0, 0.28);
    --color-scrim: rgba(0, 0, 0, 0.4);
}

:root {
    /* Brand palette. These five slots are what a customer theme overrides. */
    --color-brand-header: #014B43;
    --color-brand-header-hover: #013a34;
    --color-brand-yellow: #F6C445;
    --color-brand-yellow-text: #1a1a1a;
    --color-brand-red: #7A1E1E;
    --color-brand-stage: #445755;
    --color-brand-soft: #D6DCDC;

    --color-qr-surface: #ffffff;

    --color-on-stage-border: rgba(255, 255, 255, .45);
    --color-on-stage-tint: rgba(255, 255, 255, .08);
    --color-on-stage-hint: rgba(255, 255, 255, .82);
    --color-on-stage-divider: rgba(255, 255, 255, .25);

    --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-base: "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body: var(--font-base);
    --font-monospace: "Cascadia Code", ui-monospace, "Consolas", monospace;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-pill: 999px;

    /* Stacking order for fixed overlays. Kept in one place because the pieces live in
       different components and cannot see each other's z-index: the bottom tab bar is
       painted by the layout, the review comment sheet by a feature module. When those
       disagreed, the bar covered the bottom of the sheet. Raise values here, not locally. */
    --layer-bottom-nav: 400;
    --layer-overlay-backdrop: 450;
    --layer-overlay: 460;
    --layer-nav-sheet-backdrop: 500;
    --layer-nav-sheet: 501;

    --breakpoint-compact: 768px;
    --bottom-tab-bar-height: 64px;

    /* The help button's own size. Shared because anything else pinned to the bottom-right corner has to
       clear it: both it and the review page's comment button are fixed there and both offset themselves past
       the mobile tab bar, so with the height hardcoded in one place they landed on top of each other. */
    --help-trigger-size: 48px;
}