/* tokens.css · Foto-Schneekugel UC prototype (GB-201060)
   GENERATED by tools/build_tokens.py — edit the generator, not this file.
   The only place a brand value may exist. Both themes map onto one semantic set.
   Sources: A = configurator-core-shops v5_24 (+ v5_25 delta) · B = orwo-configurator v7.
   Write-back candidates are marked [write-back]. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/Montserrat-latin.var.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: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/Jost-latin.var.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: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/Roboto-latin.var.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; }

/* ---------- shared (identical in A and B: 69 tokens, the system is a re-skin) ---------- */
:root {
  --c-white: #FFFFFF;                 /* A/B literal #fff (33x / 28x) becomes one token */
  --c-ink: #10151B;                   /* --ink */
  --c-ink-2: #2A323B;                 /* --ink-2 */
  --c-text: var(--c-ink);
  --c-text-2: #4B5563;                /* --ink-3 */
  --c-text-muted: #6B7280;            /* --ink-4 · 4.83 on white, 4.53 on surface-2 */
  --c-text-faint: #9CA3AF;            /* --ink-5 · icons/placeholders only, never text */
  --c-disabled: #D1D5DB;              /* --ink-6 */
  --c-line: #E5E7EB;                  /* --line */
  --c-line-2: #F3F4F6;                /* --line-2 */
  --c-surface: #FFFFFF;               /* --bg-surface: editor, sheets, cart */
  --c-surface-2: #FAF7F4;             /* --bg-subtle: unselected cards, stage card */
  --c-surface-2-hover: #F0E9DF;       /* --bg-subtle-hover */
  --c-surface-muted: #F3F4F6;         /* --bg-muted */

  --c-success: #15803D;               /* --success-600 · 5.02 on white */
  --c-success-bg: #F0FDF4;            /* --success-50 */
  --c-danger: #B91C1C;                /* --danger-600 · 6.47 on white */
  --c-danger-line: #DC2626;           /* --danger-500 · borders/icons */
  --c-danger-bg: #FEF2F2;             /* --danger-50 */
  --c-warning: #916303;               /* [write-back] --warning-700, derived in A's warning hue:
                                         5.26 on white, 4.93 on surface-2. A's --warning-600 #CA8A04
                                         is 2.94 on white and is not inherited. */
  --c-warning-icon: #CA8A04;          /* --warning-600, icon fill only (non-text, >= 3:1 not required) */
  --c-info-icon: #0EA5E9;             /* --info-500, icon only */

  /* type: A's scale (11/13/15/17/20/24/28/34) + 16 for buttons (A's built .btn) */
  --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-btn: 16px; --fs-md: 17px;
  --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 28px; --fs-3xl: 34px;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.5; --lh-caption: 1.45;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --tracking-label: .06em;            /* quiet uppercase step labels */
  --btn-case: none;                   /* per shop below (D --btn-case / --btn-track) */
  --btn-track: .01em;

  /* spacing: A --space-1..8 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-screen: 16px;

  /* radius: A */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;
  --r-btn: 8px;                       /* BTN_RADIUS_PX: A's built .btn CSS (8) wins over its prose table (12) */
  --r-cta-bar: var(--r-lg);           /* the sticky bar's CTA, as on MixPix (C): core 12 px, ORWO a pill — see HANDOVER (open vs D's 4 px) */
  --r-input: 6px;                     /* INPUT_SPEC "delta": v5_25 A4 — 6 px radius */
  --input-h: 44px;                    /* v5_25 A4 — 44 px tall */
  --input-pad-x: 13px;                /* v5_25 A4 — 13 px left padding */
  --input-border: 1.5px;              /* v5_25 A4 — 1.5 px --line border */

  --target: 44px;                     /* A --btn-h: the locked control height, also the minimum target */

  /* shadows: A */
  --shadow-xs: 0 1px 2px rgba(15,21,27,.04);
  --shadow-sm: 0 1px 3px rgba(15,21,27,.06), 0 1px 2px rgba(15,21,27,.04);
  --shadow-md: 0 4px 12px -2px rgba(15,21,27,.08), 0 2px 4px rgba(15,21,27,.05);
  --shadow-lg: 0 12px 28px -8px rgba(15,21,27,.14), 0 4px 8px rgba(15,21,27,.06);
  --shadow-bar: 0 -8px 24px -12px rgba(15,21,27,.18);

  /* motion: A (three durations, two easings, one spring) */
  --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 320ms;
  --ease: cubic-bezier(.2, .85, .25, 1);       /* --ease-out */
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --press-scale: .985;
  --disabled-opacity: .5;

  /* layout */
  --container: 1140px;
  --topbar-h: 56px;                   /* shop header */
  --pbar-h: 40px;                     /* prototype bar (measured at runtime, see app.js) */
  --bottombar-h: 72px;
}

/* ---------- core (A, meinfoto.de teal) ---------- */
:root[data-theme="core"] {
  --c-brand-50: #EAF6F6; --c-brand-100: #CFEAEB; --c-brand-200: #A3D7D9; --c-brand-300: #6EC1C4;
  --c-brand-400: #4FB7BA; --c-brand-500: #35B2B6; --c-brand-600: #0D6A6D; --c-brand-700: #084B4D;
  --c-brand-900: #042A2C;             /* A --teal-* */
  --c-brand-alpha-10: rgba(53,178,182,.10); --c-brand-alpha-20: rgba(53,178,182,.20);
  --c-brand-alpha-40: rgba(53,178,182,.40);
  --c-brand-text: var(--c-brand-600); /* 6.36 on white */
  --c-accent-price: #E11D48;          /* A --price-500: sale/from prices only (regular prices are ink) */
  --c-on-brand: var(--c-white);
  --seg-on-bg: var(--c-brand-600);    /* D: the active segment is the brand fill; teal-600 so white text is 6.36 */
  --seg-on-text: var(--c-white);

  /* CTA_VARIANT "system": accessible teal-600 + white, 6.36:1 — local v4 recommendation (HANDOVER). */
  --action-primary-bg: var(--c-brand-600);
  --action-primary-bg-hover: var(--c-brand-700);
  --action-primary-text: var(--c-white);
  --action-secondary-bg: var(--c-white);
  --action-secondary-text: var(--c-brand-600);
  --action-secondary-line: var(--c-brand-500);
  --selected-bg: var(--c-brand-50);
  --selected-line: var(--c-brand-500);
  --selected-text: var(--c-brand-700);

  /* FOCUS_RING "two-part": 2 px white inner + 2 px brand-dark outer */
  --focus-inner: var(--c-white);
  --focus-outer: var(--c-brand-700);

  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;  /* FONT_CORE "montserrat" (D) */
  --font-display: var(--font-body);
}
:root[data-theme="core"][data-cta="ink"] {           /* CTA_VARIANT "ink": the live UC's ink — one token */
  --action-primary-bg: var(--c-ink); --action-primary-bg-hover: var(--c-ink-2);
}
:root[data-theme="core"][data-font="roboto"] {       /* FONT_CORE "roboto": A/B's face — one token */
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- orwo (B) ---------- */
:root[data-theme="orwo"] {
  --c-brand-50: #E4F7FC; --c-brand-100: #C4EEF7; --c-brand-200: #9BE1F0; --c-brand-300: #5FCDE6;
  --c-brand-400: #23B7DD; --c-brand-500: #06ACDA; --c-brand-600: #0788AB; --c-brand-700: #05647E;
  --c-brand-900: #063846;             /* B --brand-* (B --accent-yellow-* deliberately not mapped) */
  --c-brand-alpha-10: rgba(6,172,218,.10); --c-brand-alpha-20: rgba(6,172,218,.20);
  --c-brand-alpha-40: rgba(6,172,218,.40);
  --c-brand-text: var(--c-brand-700); /* B header: brand text on white = brand-700 (6.71) */
  --c-accent-price: #C7362E;          /* B --price-600 (5.26); --price-500 #E8443B is 3.95 on white */
  --c-on-brand: var(--c-ink);         /* B: brand fills carry ink, never white */
  --seg-on-bg: var(--c-ink);          /* D: ORWO's active segment is the black primary */
  --seg-on-text: var(--c-white);
  --r-btn: 4px;                       /* D [data-shop=ORDE] --radius 4px, "poster-graphic" */
  --r-cta-bar: var(--r-pill);         /* C (MixPix) ORWO bar: black pill "Weiter ›" */
  --btn-case: uppercase;              /* D: ORWO buttons ORDER / ACTIVATE */
  --btn-track: .06em;

  --action-primary-bg: var(--c-ink);  /* B: primary = --ink, white label */
  --action-primary-bg-hover: var(--c-ink-2);
  --action-primary-text: var(--c-white);
  --action-secondary-bg: var(--c-white);
  --action-secondary-text: var(--c-brand-700);   /* B uses #05647E on white */
  --action-secondary-line: var(--c-brand-600);
  --selected-bg: var(--c-brand-50);
  --selected-line: var(--c-brand-500);
  --selected-text: var(--c-brand-700);

  --focus-inner: var(--c-white);
  --focus-outer: var(--c-brand-700);

  --font-body: "Futura PT", "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;  /* FONT_ORWO "jost" (C, D) */
  --font-display: var(--font-body);
  /* Local prototype recommendation; upstream ORWO decision remains open. */
  --c-success: var(--c-brand-text);
  --c-success-bg: var(--selected-bg);
}

:root {
  --photo-thumb-size: 80px;
  --photo-add-size: 112px;
  --selection-check-size: 18px;
  --bar-action-max: 62vw;
}

/* ---------- flags that change one token (both themes) ---------- */
:root[data-theme="orwo"][data-font-orwo="roboto"] {   /* FONT_ORWO "roboto": B --font-sans — one token */
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-theme="core"][data-btn-radius="12"] { --r-btn: 12px; }   /* A's radius question; core only */
:root[data-input="v5_24"] { --r-input: 8px; --input-h: 48px; --input-pad-x: 14px; --input-border: 1px; }