@layer occ.tokens {
  :root,
  [data-brand="occ"] {
    --occ-palette-warm-ivory: #FAF7F1;
    --occ-palette-ivory-raised: #FFFDF9;
    --occ-palette-soft-sand: #E8DDCB;
    --occ-palette-obsidian: #0B0B0B;
    --occ-palette-charcoal: #1A1A1A;
    --occ-palette-charcoal-soft: #242424;
    --occ-palette-antique-gold: #C9A96B;
    --occ-palette-gold-light: #E6CC94;
    --occ-palette-shiny-bronze: #B07D4F;
    --occ-palette-deep-bronze: #6B4E2E;
    --occ-palette-sand-taupe: #8A7F73;
    --occ-palette-hat-red: #B9312C;

    --occ-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --occ-font-display: "Playfair Display", Georgia, "Times New Roman", serif;

    --occ-fw-regular: 400;
    --occ-fw-medium: 500;
    --occ-fw-semibold: 600;
    --occ-fw-bold: 700;

    --occ-text-xs: .75rem;
    --occ-text-sm: .875rem;
    --occ-text-md: 1rem;
    --occ-text-lg: 1.125rem;
    --occ-text-xl: 1.375rem;
    --occ-text-2xl: 1.75rem;
    --occ-text-3xl: 2.25rem;
    --occ-text-4xl: 3rem;
    --occ-text-5xl: 4rem;
    --occ-text-6xl: 5rem;
    --occ-text-7xl: 6.875rem;

    --occ-leading-tight: .95;
    --occ-leading-heading: 1.05;
    --occ-leading-ui: 1.35;
    --occ-leading-body: 1.6;

    --occ-tracking-tight: -.025em;
    --occ-tracking-normal: 0;
    --occ-tracking-wide: .08em;
    --occ-tracking-caps: .18em;
    --occ-tracking-caps-wide: .22em;

    --occ-space-0: 0;
    --occ-space-1: .25rem;
    --occ-space-2: .5rem;
    --occ-space-3: .75rem;
    --occ-space-4: 1rem;
    --occ-space-6: 1.5rem;
    --occ-space-8: 2rem;
    --occ-space-12: 3rem;
    --occ-space-16: 4rem;
    --occ-space-24: 6rem;
    --occ-space-32: 8rem;
    --occ-space-40: 10rem;
    --occ-space-48: 12rem;

    --occ-container-sm: 42rem;
    --occ-container-md: 64rem;
    --occ-container-lg: 80rem;
    --occ-container-xl: 90rem;
    --occ-container-max: 100rem;
    --occ-page-gutter: clamp(1rem, 3vw, 3.5rem);
    --occ-section-space: clamp(4rem, 9vw, 10rem);
    --occ-grid-gap: clamp(1rem, 2vw, 2rem);

    --occ-radius-xs: .375rem;
    --occ-radius-sm: .5rem;
    --occ-radius-md: .75rem;
    --occ-radius-lg: 1rem;
    --occ-radius-xl: 1.5rem;
    --occ-radius-round: 999px;

    --occ-control-sm: 2.25rem;
    --occ-control-md: 2.75rem;
    --occ-control-lg: 3.25rem;
    --occ-touch-min: 2.75rem;

    --occ-duration-fast: 160ms;
    --occ-duration-base: 300ms;
    --occ-duration-slow: 650ms;
    --occ-duration-editorial: 1000ms;
    --occ-ease-standard: cubic-bezier(.2,.8,.2,1);
    --occ-ease-emphasis: cubic-bezier(.16,1,.3,1);

    --occ-z-base: 0;
    --occ-z-raised: 10;
    --occ-z-sticky: 30;
    --occ-z-overlay: 60;
    --occ-z-modal: 80;
    --occ-z-toast: 100;

    --occ-accent: var(--occ-palette-antique-gold);
    --occ-accent-hover: var(--occ-palette-gold-light);
    --occ-accent-strong: var(--occ-palette-shiny-bronze);
    --occ-accent-deep: var(--occ-palette-deep-bronze);
    --occ-red: var(--occ-palette-hat-red);

    --occ-metallic-gradient:
      linear-gradient(
        110deg,
        var(--occ-palette-deep-bronze) 0%,
        var(--occ-palette-shiny-bronze) 28%,
        var(--occ-palette-antique-gold) 55%,
        #F0D9A6 72%,
        var(--occ-palette-antique-gold) 100%
      );

    --occ-focus-color: var(--occ-palette-antique-gold);
    --occ-focus-offset: 3px;
  }

  :root,
  [data-brand="occ"][data-theme="light"] {
    color-scheme: light;

    --occ-bg: var(--occ-palette-warm-ivory);
    --occ-bg-elevated: var(--occ-palette-ivory-raised);
    --occ-bg-subtle: #F3EEE5;
    --occ-surface: var(--occ-palette-ivory-raised);
    --occ-surface-raised: #FFFFFF;
    --occ-surface-muted: var(--occ-palette-soft-sand);
    --occ-surface-inverse: var(--occ-palette-obsidian);

    --occ-fg: #1F1F1F;
    --occ-fg-muted: #62605C;
    --occ-fg-subtle: #858078;
    --occ-fg-inverse: var(--occ-palette-warm-ivory);

    --occ-border: rgb(31 31 31 / .12);
    --occ-border-strong: rgb(31 31 31 / .22);
    --occ-border-premium: rgb(107 78 46 / .28);
    --occ-overlay: rgb(11 11 11 / .46);

    --occ-success: #496A54;
    --occ-warning: #9A6B2D;
    --occ-danger: #9C4B42;
    --occ-info: #456578;

    --occ-shadow-xs: 0 1px 2px rgb(31 31 31 / .05);
    --occ-shadow-sm: 0 8px 24px rgb(31 31 31 / .07);
    --occ-shadow-md: 0 18px 50px rgb(31 31 31 / .10);
    --occ-shadow-focus: 0 0 0 3px rgb(201 169 107 / .30);
  }

  [data-brand="occ"][data-theme="dark"] {
    color-scheme: dark;

    --occ-bg: var(--occ-palette-obsidian);
    --occ-bg-elevated: #111111;
    --occ-bg-subtle: var(--occ-palette-charcoal);
    --occ-surface: var(--occ-palette-charcoal);
    --occ-surface-raised: var(--occ-palette-charcoal-soft);
    --occ-surface-muted: #2A2825;
    --occ-surface-inverse: var(--occ-palette-warm-ivory);

    --occ-fg: var(--occ-palette-warm-ivory);
    --occ-fg-muted: #B7ADA1;
    --occ-fg-subtle: var(--occ-palette-sand-taupe);
    --occ-fg-inverse: var(--occ-palette-obsidian);

    --occ-border: rgb(250 247 241 / .14);
    --occ-border-strong: rgb(250 247 241 / .24);
    --occ-border-premium: rgb(201 169 107 / .42);
    --occ-overlay: rgb(0 0 0 / .62);

    --occ-success: #79A486;
    --occ-warning: #D0A05A;
    --occ-danger: #D4756D;
    --occ-info: #7EA3B6;

    --occ-shadow-xs: 0 1px 2px rgb(0 0 0 / .30);
    --occ-shadow-sm: 0 8px 24px rgb(0 0 0 / .34);
    --occ-shadow-md: 0 18px 52px rgb(0 0 0 / .44);
    --occ-shadow-focus: 0 0 0 3px rgb(201 169 107 / .34);
  }
}