/* Generated theme tokens for this page; three looks. */
:root {
  /* Sunset Boulevard — An energetic creative-pitch theme that anchors warm sunset accents against deep contrast, keeping marketing and event workflows expressive without losing hierarchy. */
  --ground: #FFF8ED;
  --ground-raised: #FFF1DC;
  --ground-well: #FFFFFF;
  --card: #FFFFFF;
  --ink: #264653;
  --ink-soft: #6A3F35;
  --ink-inverse: #FFFFFF;
  --accent: #F4A261;
  --on-accent: #FFFFFF;
  --rule: undefined;
  --success: #166534;
  --warning: #92400E;
  --error: #991B1B;
  --font-body: DejaVu Serif, Georgia, serif;
  --font-display: DejaVu Serif, Georgia, serif;
  --display-weight: 700;
  --radius-card: sunset-rounded;
  --radius-button: wide-pill;
  --gap: 18px;
  --card-border: undefined;
  --hero-background: undefined;
  --hero-glow: undefined;
  --t-id: anthropic-sunset-boulevard;
  --t-name: Sunset Boulevard;
  --t-version: 0.1.0;
  --t-description: Warm creative theme derived from Anthropic Sunset Boulevard.;
  --t-typography-family: DejaVu Serif, Georgia, serif;
  --t-typography-display-family: DejaVu Serif, Georgia, serif;
  --t-typography-display-weight: 700;
  --t-typography-ritual-weight: 400;
  --t-typography-scale: 12 15 17 22 32 44;
  --t-typography-weights: 400 600 700;
  --t-typography-line-heights-caption: 20;
  --t-typography-line-heights-body: 26;
  --t-typography-line-heights-heading: 38;
  --t-typography-letter-spacing-caption: 0;
  --t-typography-letter-spacing-body: 0;
  --t-typography-letter-spacing-heading: 0;
  --t-typography-feature-settings-body: kern;
  --t-spacing-philosophy: warm-editorial;
  --t-spacing-scale: 0 4 8 14 20 28 40;
  --t-spacing-component-density-button: 1.06;
  --t-spacing-component-density-card: 1.08;
  --t-spacing-component-density-table: 1;
  --t-shape-language: rounded-cards;
  --t-shape-radius-scale: 0 6 12 18 28;
  --t-shape-border-widths: 0 1 3;
  --t-shape-corner-treatments-card: sunset-rounded;
  --t-shape-corner-treatments-button: wide-pill;
  --t-elevation-style: warm-glow;
  --t-elevation-surface-treatments-card: warm-glow;
  --t-elevation-surface-treatments-panel: warm-glow;
  --t-motion-personality: golden-sweep;
  --t-motion-decorative: on;
  --t-motion-durations-fast: 100;
  --t-motion-durations-normal: 220;
  --t-motion-durations-slow: 440;
  --t-motion-easings-standard: cubic-bezier(0.2, 0, 0, 1);
  --t-motion-easings-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --t-motion-transition-defaults-duration: 220;
  --t-motion-transition-defaults-easing: standard;
  --t-layout-bias: editorial-stagger;
  --t-layout-default-gap: 18;
  --t-layout-default-padding: 22;
  --t-layout-breakpoints-sm: 480;
  --t-layout-breakpoints-md: 768;
  --t-layout-breakpoints-lg: 1024;
  --t-icons-family: "@expo/vector-icons/Ionicons";
  --t-icons-style: filled;
  --t-icons-sizes-sm: 16;
  --t-icons-sizes-md: 24;
  --t-icons-sizes-lg: 32;
  --t-color-palette-primary: #264653;
  --t-color-palette-secondary: #E76F51;
  --t-color-palette-accent: #F4A261;
  --t-color-palette-neutral: #E9C46A;
  --t-color-palette-on-accent: #FFFFFF;
  --t-color-semantic-success: #166534;
  --t-color-semantic-warning: #92400E;
  --t-color-semantic-error: #991B1B;
  --t-color-semantic-info: #075985;
  --t-color-surface-background: #FFF8ED;
  --t-color-surface-card: #FFFFFF;
  --t-color-surface-raised: #FFF1DC;
  --t-color-surface-overlay: #264653;
  --t-color-surface-well: #FFFFFF;
  --t-color-surface-rail: #FFF8ED;
  --t-color-text-primary: #264653;
  --t-color-text-secondary: #6A3F35;
  --t-color-text-inverse: #FFFFFF;
  --t-accessibility: undefined;
}

[data-theme="anthropic-sunset-boulevard"] {
  /* Sunset Boulevard — An energetic creative-pitch theme that anchors warm sunset accents against deep contrast, keeping marketing and event workflows expressive without losing hierarchy. */
  --ground: #FFF8ED;
  --ground-raised: #FFF1DC;
  --ground-well: #FFFFFF;
  --card: #FFFFFF;
  --ink: #264653;
  --ink-soft: #6A3F35;
  --ink-inverse: #FFFFFF;
  --accent: #F4A261;
  --on-accent: #FFFFFF;
  --rule: undefined;
  --success: #166534;
  --warning: #92400E;
  --error: #991B1B;
  --font-body: DejaVu Serif, Georgia, serif;
  --font-display: DejaVu Serif, Georgia, serif;
  --display-weight: 700;
  --radius-card: sunset-rounded;
  --radius-button: wide-pill;
  --gap: 18px;
  --card-border: undefined;
  --hero-background: undefined;
  --hero-glow: undefined;
  --t-id: anthropic-sunset-boulevard;
  --t-name: Sunset Boulevard;
  --t-version: 0.1.0;
  --t-description: Warm creative theme derived from Anthropic Sunset Boulevard.;
  --t-typography-family: DejaVu Serif, Georgia, serif;
  --t-typography-display-family: DejaVu Serif, Georgia, serif;
  --t-typography-display-weight: 700;
  --t-typography-ritual-weight: 400;
  --t-typography-scale: 12 15 17 22 32 44;
  --t-typography-weights: 400 600 700;
  --t-typography-line-heights-caption: 20;
  --t-typography-line-heights-body: 26;
  --t-typography-line-heights-heading: 38;
  --t-typography-letter-spacing-caption: 0;
  --t-typography-letter-spacing-body: 0;
  --t-typography-letter-spacing-heading: 0;
  --t-typography-feature-settings-body: kern;
  --t-spacing-philosophy: warm-editorial;
  --t-spacing-scale: 0 4 8 14 20 28 40;
  --t-spacing-component-density-button: 1.06;
  --t-spacing-component-density-card: 1.08;
  --t-spacing-component-density-table: 1;
  --t-shape-language: rounded-cards;
  --t-shape-radius-scale: 0 6 12 18 28;
  --t-shape-border-widths: 0 1 3;
  --t-shape-corner-treatments-card: sunset-rounded;
  --t-shape-corner-treatments-button: wide-pill;
  --t-elevation-style: warm-glow;
  --t-elevation-surface-treatments-card: warm-glow;
  --t-elevation-surface-treatments-panel: warm-glow;
  --t-motion-personality: golden-sweep;
  --t-motion-decorative: on;
  --t-motion-durations-fast: 100;
  --t-motion-durations-normal: 220;
  --t-motion-durations-slow: 440;
  --t-motion-easings-standard: cubic-bezier(0.2, 0, 0, 1);
  --t-motion-easings-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --t-motion-transition-defaults-duration: 220;
  --t-motion-transition-defaults-easing: standard;
  --t-layout-bias: editorial-stagger;
  --t-layout-default-gap: 18;
  --t-layout-default-padding: 22;
  --t-layout-breakpoints-sm: 480;
  --t-layout-breakpoints-md: 768;
  --t-layout-breakpoints-lg: 1024;
  --t-icons-family: "@expo/vector-icons/Ionicons";
  --t-icons-style: filled;
  --t-icons-sizes-sm: 16;
  --t-icons-sizes-md: 24;
  --t-icons-sizes-lg: 32;
  --t-color-palette-primary: #264653;
  --t-color-palette-secondary: #E76F51;
  --t-color-palette-accent: #F4A261;
  --t-color-palette-neutral: #E9C46A;
  --t-color-palette-on-accent: #FFFFFF;
  --t-color-semantic-success: #166534;
  --t-color-semantic-warning: #92400E;
  --t-color-semantic-error: #991B1B;
  --t-color-semantic-info: #075985;
  --t-color-surface-background: #FFF8ED;
  --t-color-surface-card: #FFFFFF;
  --t-color-surface-raised: #FFF1DC;
  --t-color-surface-overlay: #264653;
  --t-color-surface-well: #FFFFFF;
  --t-color-surface-rail: #FFF8ED;
  --t-color-text-primary: #264653;
  --t-color-text-secondary: #6A3F35;
  --t-color-text-inverse: #FFFFFF;
  --t-accessibility: undefined;
}

[data-theme="catalog-velvet-stage"] {
  /* Velvet Stage — A cinematic luxury language with high-contrast editorial titles, measured grotesk copy, elliptical framing, and a warm spotlight elevation signature. */
  --ground: #130F18;
  --ground-raised: #281E31;
  --ground-well: #21192A;
  --card: #1E1725;
  --ink: #FFF7F2;
  --ink-soft: #C9B9CF;
  --ink-inverse: #FFF7F2;
  --accent: #E0B86C;
  --on-accent: #21131C;
  --rule: #49334F;
  --success: #1F6A4A;
  --warning: #8A5200;
  --error: #A83245;
  --font-body: "Gill Sans", "Trebuchet MS", sans-serif;
  --font-display: Didot, "Bodoni 72", serif;
  --display-weight: 700;
  --radius-card: 36px 8px;
  --radius-button: 999px;
  --gap: 24px;
  --card-border: 1px solid #49334F;
  --hero-background: radial-gradient(circle at top,#3A2239,#1E1725 64%);
  --hero-glow: 0 22px 48px -12px rgba(0,0,0,.62);
  --t-id: catalog-velvet-stage;
  --t-name: Velvet Stage;
  --t-version: 1.0.0;
  --t-description: A dark theatrical system with Didone display type, restrained grotesk body copy, elliptical controls, spotlight depth, and slow curtain-like motion.;
  --t-typography-family: "Gill Sans", "Trebuchet MS", sans-serif;
  --t-typography-display-family: Didot, "Bodoni 72", serif;
  --t-typography-display-weight: 700;
  --t-typography-ritual-weight: 500;
  --t-typography-scale: 12 14 17 24 38 56;
  --t-typography-weights: 400 500 700;
  --t-typography-line-heights-caption: 20;
  --t-typography-line-heights-body: 26;
  --t-typography-line-heights-heading: 44;
  --t-typography-letter-spacing-caption: 0.14;
  --t-typography-letter-spacing-body: 0.008;
  --t-typography-letter-spacing-heading: -0.02;
  --t-typography-letter-spacing-display: -0.035;
  --t-typography-feature-settings-body: kern;
  --t-typography-feature-settings-display: kern, liga;
  --t-spacing-philosophy: stage-negative-space;
  --t-spacing-scale: 0 6 12 18 26 38 54 72;
  --t-spacing-component-density-button: 1.12;
  --t-spacing-component-density-card: 1.2;
  --t-spacing-component-density-table: 1.04;
  --t-shape-language: deco-ellipse;
  --t-shape-radius-scale: 2 8 18 36 999;
  --t-shape-border-widths: 0 1 2;
  --t-shape-corner-treatments-card: 36px 8px;
  --t-shape-corner-treatments-row: 18px;
  --t-shape-corner-treatments-button: 999px;
  --t-shape-corner-treatments-glyph: 50%;
  --t-elevation-style: velvet-spotlight;
  --t-elevation-surface-treatments-card-border: 1px solid #49334F;
  --t-elevation-surface-treatments-line-soft: #49334F;
  --t-elevation-surface-treatments-hero-background: radial-gradient(circle at top,#3A2239,#1E1725 64%);
  --t-elevation-surface-treatments-hero-border: 1px solid #6E496A;
  --t-elevation-surface-treatments-hero-glow: 0 22px 48px -12px rgba(0,0,0,.62);
  --t-motion-personality: curtain-glide;
  --t-motion-decorative: on;
  --t-motion-durations-fast: 120;
  --t-motion-durations-normal: 280;
  --t-motion-durations-slow: 620;
  --t-motion-easings-standard: cubic-bezier(.22,1,.36,1);
  --t-motion-easings-emphasis: cubic-bezier(.16,1,.3,1);
  --t-motion-transition-defaults-duration: 280;
  --t-motion-transition-defaults-easing: standard;
  --t-layout-bias: cinematic-proscenium;
  --t-layout-default-gap: 24;
  --t-layout-default-padding: 30;
  --t-layout-breakpoints-sm: 480;
  --t-layout-breakpoints-md: 768;
  --t-layout-breakpoints-lg: 1024;
  --t-icons-family: "@expo/vector-icons/Ionicons";
  --t-icons-style: filled;
  --t-icons-sizes-sm: 17;
  --t-icons-sizes-md: 25;
  --t-icons-sizes-lg: 35;
  --t-color-palette-primary: #F0A6C2;
  --t-color-palette-secondary: #B9A1D8;
  --t-color-palette-accent: #E0B86C;
  --t-color-palette-neutral: #49334F;
  --t-color-palette-on-accent: #21131C;
  --t-color-semantic-success: #1F6A4A;
  --t-color-semantic-warning: #8A5200;
  --t-color-semantic-error: #A83245;
  --t-color-semantic-info: #315F8A;
  --t-color-surface-background: #130F18;
  --t-color-surface-card: #1E1725;
  --t-color-surface-raised: #281E31;
  --t-color-surface-overlay: #09070C;
  --t-color-surface-well: #21192A;
  --t-color-surface-rail: #0C0910;
  --t-color-text-primary: #FFF7F2;
  --t-color-text-secondary: #C9B9CF;
  --t-color-text-inverse: #FFF7F2;
  --t-accessibility: undefined;
}

[data-theme="open-design-brutalist-concrete"] {
  /* Brutalist Concrete — A raw anti-polish system derived from Open Design Brutalism, adding hard edges, exposed hierarchy, and forceful CTAs to balance the softer Anthropic catalog entries. */
  --ground: #FFFFFF;
  --ground-raised: #FFFFFF;
  --ground-well: #F3F4F6;
  --card: #F3F4F6;
  --ink: #111827;
  --ink-soft: #374151;
  --ink-inverse: #FFFFFF;
  --accent: #DAA144;
  --on-accent: #FFFFFF;
  --rule: undefined;
  --success: #166534;
  --warning: #92400E;
  --error: #991B1B;
  --font-body: Darker Grotesque, Arial, sans-serif;
  --font-display: Darker Grotesque, Arial, sans-serif;
  --display-weight: 900;
  --radius-card: square;
  --radius-button: slab;
  --gap: 24px;
  --card-border: undefined;
  --hero-background: undefined;
  --hero-glow: undefined;
  --t-id: open-design-brutalist-concrete;
  --t-name: Brutalist Concrete;
  --t-version: 0.1.0;
  --t-description: Hard-edged industrial theme derived from Open Design Brutalism.;
  --t-typography-family: Darker Grotesque, Arial, sans-serif;
  --t-typography-display-family: Darker Grotesque, Arial, sans-serif;
  --t-typography-display-weight: 900;
  --t-typography-ritual-weight: 400;
  --t-typography-scale: 12 15 18 26 40 56;
  --t-typography-weights: 400 700 900;
  --t-typography-line-heights-caption: 20;
  --t-typography-line-heights-body: 27;
  --t-typography-line-heights-heading: 48;
  --t-typography-letter-spacing-caption: 0;
  --t-typography-letter-spacing-body: 0;
  --t-typography-letter-spacing-heading: 0;
  --t-typography-feature-settings-body: kern;
  --t-spacing-philosophy: raw-brutalist;
  --t-spacing-scale: 0 8 12 18 26 38 56;
  --t-spacing-component-density-button: 1.08;
  --t-spacing-component-density-card: 1.2;
  --t-spacing-component-density-table: 1.04;
  --t-shape-language: hard-edge;
  --t-shape-radius-scale: 0 0 2 4 6;
  --t-shape-border-widths: 0 2 4;
  --t-shape-corner-treatments-card: square;
  --t-shape-corner-treatments-button: slab;
  --t-elevation-style: block-shadow;
  --t-elevation-surface-treatments-card: block-shadow;
  --t-elevation-surface-treatments-panel: block-shadow;
  --t-motion-personality: abrupt;
  --t-motion-decorative: on;
  --t-motion-durations-fast: 60;
  --t-motion-durations-normal: 140;
  --t-motion-durations-slow: 260;
  --t-motion-easings-standard: cubic-bezier(0.2, 0, 0, 1);
  --t-motion-easings-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --t-motion-transition-defaults-duration: 140;
  --t-motion-transition-defaults-easing: standard;
  --t-layout-bias: jarring-blocks;
  --t-layout-default-gap: 24;
  --t-layout-default-padding: 28;
  --t-layout-breakpoints-sm: 480;
  --t-layout-breakpoints-md: 768;
  --t-layout-breakpoints-lg: 1024;
  --t-icons-family: "@expo/vector-icons/Feather";
  --t-icons-style: stroke;
  --t-icons-sizes-sm: 16;
  --t-icons-sizes-md: 24;
  --t-icons-sizes-lg: 32;
  --t-color-palette-primary: #111827;
  --t-color-palette-secondary: #DD614C;
  --t-color-palette-accent: #DAA144;
  --t-color-palette-neutral: #FFFFFF;
  --t-color-palette-on-accent: #FFFFFF;
  --t-color-semantic-success: #166534;
  --t-color-semantic-warning: #92400E;
  --t-color-semantic-error: #991B1B;
  --t-color-semantic-info: #075985;
  --t-color-surface-background: #FFFFFF;
  --t-color-surface-card: #F3F4F6;
  --t-color-surface-raised: #FFFFFF;
  --t-color-surface-overlay: #111827;
  --t-color-surface-well: #F3F4F6;
  --t-color-surface-rail: #FFFFFF;
  --t-color-text-primary: #111827;
  --t-color-text-secondary: #374151;
  --t-color-text-inverse: #FFFFFF;
  --t-accessibility: undefined;
}

body { background: var(--ground); color: var(--ink); font-family: var(--font-body); margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); }
.gtm-banner { background: var(--warning); color: #fff; font-weight: 600; letter-spacing: .04em; padding: .5rem 1rem; text-transform: uppercase; font-size: .78rem; }
.gtm-theme-switch button { font: inherit; border: 1px solid var(--rule); background: var(--card); color: var(--ink); border-radius: var(--radius-button); padding: .3rem .7rem; margin-right: .4rem; cursor: pointer; }

/* MS9b: site role mapping — library catalog unchanged; AA from token choice per theme. */

:root {
  --accent: #264653;
  --on-accent: #FFFFFF;
  --site-cta-bg: #F4A261;
  --site-cta-fg: #264653;
}

[data-theme="anthropic-sunset-boulevard"] {
  --accent: #264653;
  --on-accent: #FFFFFF;
  --site-cta-bg: #F4A261;
  --site-cta-fg: #264653;
}

[data-theme="catalog-velvet-stage"] {
  --accent: #E0B86C;
  --on-accent: #21131C;
  --site-cta-bg: #E0B86C;
  --site-cta-fg: #21131C;
}

[data-theme="open-design-brutalist-concrete"] {
  --accent: #111827;
  --on-accent: #FFFFFF;
  --site-cta-bg: #DAA144;
  --site-cta-fg: #111827;
}