/* =============================================================================
   GENERATED FILE. DO NOT EDIT.

   Source:    app/design_tokens.py
   Regenerate: python scripts/gen_tokens_css.py
   CI runs the same script with --check and fails when this file is stale.

   Every custom property below is also what the Pillow print renderer reads,
   which is the whole point: the browser and the garment cannot drift apart.
   ============================================================================= */

:root {
    /* Brand chrome. Names come from each token's `css` field. */
    --color-primary: #121212;
    --color-primary-light: #ffffff;
    --color-brand-orange: #E4632B;
    --color-brand-orange-hover: #D05520;
    --color-brand-orange-tint: rgba(228, 99, 43, 0.14);
    --color-accent: #76191c;
    --color-accent-alt: #3070c1;
    --color-text: #222222;
    --color-text-muted: #666666;
    --color-text-light: #999999;
    --color-bg: #ffffff;
    --color-bg-alt: #f5f5f5;
    --color-bg-dark: #121212;
    --color-paper: #F7F2E9;
    --color-paper-deep: #EFE6D5;
    --color-positive: #1B8A48;
    --color-status-success: #2e7d32;
    --color-border: #e0e0e0;
    --color-border-dark: #333333;
    --color-brand-orange-deep: #c45424;
    --color-slate-pale: #e2e8f0;
    --color-slate-light: #cbd5e1;
    --color-slate-muted: #94a3b8;
    --color-slate: #64748b;
    --color-slate-dark: #475569;
    --color-slate-deep: #1f2937;
    --font-display: 'IBM Plex Sans Thai', 'Noto Sans Thai', sans-serif;

    /* The scale: spacing, radius, shadow, transition, easing. */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-sticker: 0 4px 16px rgba(228, 99, 43, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-sticker-hover: 0 12px 30px rgba(228, 99, 43, 0.18), 0 3px 8px rgba(0, 0, 0, 0.07);
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 50px;
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Print inks. Derived names: --palette-<token id>. */
    --palette-white: #FFFFFF;
    --palette-ivory: #F6E7C9;
    --palette-cream: #F2E6D2;
    --palette-orange: #E4632B;
    --palette-pink: #EE194F;
    --palette-navy: #243A6B;
    --palette-dark-brown: #4A3428;
    --palette-deep-teal: #1B7A8A;
    --palette-teal: #1B7A8A;
    --palette-forest: #1B8A48;
    --palette-green: #1B8A48;
    --palette-forest-deep: #1B5E3A;
    --palette-deep-pine: #1B3D2F;
    --palette-black: #000000;
    --palette-black-soft: #111111;
    --palette-badge-gold: #BCA600;
    --palette-badge-orange: #E4632B;
    --palette-badge-pink: #EE194F;
    --palette-badge-red: #B02418;
    --palette-badge-rust: #A8480C;
    --palette-badge-mustard: #D4A017;
    --palette-badge-moss: #6E8B3D;
    --palette-badge-forest: #2F5D3F;
    --palette-cocoa: #5A3D2E;
    --palette-cocoa-deep: #3C2A1E;
    --palette-charcoal: #2F2A28;
    --palette-ink-soft: #2A2A2A;
    --palette-navy-light: #37568A;
    --palette-navy-shadow: #16233F;
    --palette-cream-paper: #FBF3E2;
    --palette-ivory-warm: #F2E9C8;
    --palette-member-green: #1B7A3D;
    --palette-member-green-deep: #1C5233;
    --palette-film-cream: #F5EDDD;
    --palette-film-black: #1F1A12;
    --palette-film-redgreen: #B85440;
    --palette-sticker-caption: #86502D;
    --palette-caption-brown: #3D2E1F;

    /* Garment swatches. Derived names: --shirt-<id>. */
    --shirt-white: #ffffff;
    --shirt-cream: #f5f5dc;
    --shirt-black: #1a1a1a;
    --shirt-grey: #808080;
    --shirt-navy: #1e3a5f;
}

/* One @font-face per font the browser previews. The editors build a
   family name as `pt-<registry font key>` at runtime, so a font whose
   face is missing here previews in the browser's fallback: a picker
   whose preview is wrong is worse than no preview. */
@font-face {
    font-family: 'pt-keepon';
    src: url('/assets/fonts/KeeponTruckin.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-abril';
    src: url('/assets/fonts/AbrilFatface-Regular.otf') format('opentype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-recoleta';
    src: url('/assets/fonts/Recoleta-Regular.otf') format('opentype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-parisienne';
    src: url('/assets/fonts/Parisienne-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-fredoka';
    src: url('/assets/fonts/Fredoka-VariableFont_wdth,wght.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-patrick';
    src: url('/assets/fonts/PatrickHand-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-baloo';
    src: url('/assets/fonts/baloo-2.bold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-league';
    src: url('/assets/fonts/LeagueSpartan-ExtraBold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-archivo';
    src: url('/assets/fonts/ArchivoBlack-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-dmserif';
    src: url('/assets/fonts/DMSerifDisplay-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-playfair';
    src: url('/assets/fonts/PlayfairDisplay-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-playfair_it';
    src: url('/assets/fonts/PlayfairDisplay-Italic.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-cormorant';
    src: url('/assets/fonts/CormorantGaramond-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-cormorant_it';
    src: url('/assets/fonts/CormorantGaramond-Italic.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-ebgaramond';
    src: url('/assets/fonts/EBGaramond-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-poppins';
    src: url('/assets/fonts/Poppins-Black.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-bricolage';
    src: url('/assets/fonts/BricolageGrotesque.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-lilita';
    src: url('/assets/fonts/LilitaOne-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-inter';
    src: url('/assets/fonts/Inter-Medium.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'pt-pacifico';
    src: url('/assets/fonts/Pacifico-Regular.ttf') format('truetype');
    font-display: swap;
}