@import "./home-tokens.css";

/* The homepage uses the app's house palette for the site and its product views. */
:root {
  --ox-gold: var(--ox-brand);
  --ox-gold-bright: var(--ox-brand-bright);
  --ox-gold-deep: var(--ox-brand-deep);
  --ox-gold-hover-ink: var(--ox-brand-hover-on-light);
  --ox-on-gold: var(--ox-on-brand);
  --ox-rust: var(--ox-brand);
  --ox-rust-text: var(--ox-brand-text);
  --ox-rust-ink: var(--ox-accent-on-light);
  --ox-rust-text-ink: var(--ox-accent-text-on-light);
  --ox-ink: var(--ox-dark);
  --ox-void: var(--ox-dark-void);
  --ox-panel: var(--ox-dark-panel);
  --ox-hl: var(--ox-dark-hl);
  --ox-border: var(--ox-dark-border);
  --ox-rule: var(--ox-dark-rule);
  --ox-paper: var(--ox-light);
  --ox-paper-void: var(--ox-light-void);
  --ox-paper-panel: var(--ox-light-panel);
  --ox-paper-hl: var(--ox-light-hl);
  --ox-paper-border: var(--ox-light-border);
  --ox-paper-rule: var(--ox-light-rule);
  --ox-text: var(--ox-light);
  --ox-text-ink: var(--ox-dark);
  --ox-text-ink-body: var(--ox-text-body-on-light);
  --ox-muted-ink: var(--ox-muted-on-light);
  --ox-muted-text-ink: var(--ox-muted-on-light);
  --ox-dim-ink: var(--ox-dim);
  --ox-shadow-pop-ink: var(--ox-shadow-pop-on-light);
  --ox-shadow-panel-ink: var(--ox-shadow-panel-on-light);
  --ox-shadow-ui: var(--ox-shadow-panel);
  --ox-shadow-ui-ink: var(--ox-shadow-panel-on-light);
  --ox-ember-0: var(--ox-brand-0);
  --ox-ember-1: var(--ox-brand-1);
  --ox-ember-2: var(--ox-brand-2);
  --ox-ember-3: var(--ox-brand-3);
  --ox-ember-4: var(--ox-brand-4);
  --ox-ember-5: var(--ox-brand-5);
  --ox-ember-6: var(--ox-brand-6);
  --ox-ember-7: var(--ox-brand-7);
}

/* Keep the website roles in step with the app, including the light theme. */
:root,
:root[data-theme] {
  --l-bg: var(--st-bg);
  --l-fg: var(--st-text);
  --l-body: var(--st-body);
  --l-muted: var(--st-muted);
  --l-line: var(--st-border);
  --l-gold: var(--st-gold-mark);
  --l-gold-text: light-dark(var(--ox-brand-text-on-light), var(--ox-brand-text));
  --l-gold-deep: var(--ox-brand-deep);
  --l-shadow: var(--panel-shadow);
  --l-shadow-sm: var(--shadow-ui);
  --l-spot: color-mix(in srgb, var(--l-gold) 8%, transparent);
  /* The metallic sweep on the accent word. Every stop stays readable on its
     ground: on light, deep golds with one brief bright glint; on dark, the
     reverse, bright golds with one brief mid-gold shade. */
  --l-aurora: linear-gradient(
    135deg,
    light-dark(var(--ox-brand-deep), var(--ox-brand-bright)),
    light-dark(var(--ox-brand-1), var(--ox-brand)),
    light-dark(var(--ox-brand-deep), var(--ox-brand-7)),
    light-dark(var(--ox-brand), var(--ox-brand-1)),
    light-dark(var(--ox-brand-deep), var(--ox-brand)),
    light-dark(var(--ox-brand-1), var(--ox-brand-bright))
  );
  --l-rainbow: linear-gradient(90deg, var(--l-muted), var(--ox-brand), var(--l-fg), var(--ox-brand-bright), var(--l-body), var(--ox-brand-deep), var(--l-muted));
  --ground: var(--st-bg);
  --void: var(--st-void);
  --panel: var(--st-panel);
  --raised: var(--st-hl);
  --line: var(--st-border);
  --rule: var(--st-rule);
  --ink: var(--st-text);
  --body: var(--st-body);
  --ink-2: var(--st-body);
  --ink-3: var(--st-muted);
  --muted: var(--st-muted);
  --faint: var(--st-muted);
  --quiet: var(--st-dim);
  --gold: var(--ox-brand);
  --gold-mark: var(--st-gold-mark);
  --rust: var(--st-rust);
  --link: var(--st-rust-text);
  --accent-text: var(--st-rust-text);
  --ring: var(--st-ring);
  --button-primary-bg: var(--action);
  --button-primary-fg: var(--on-action);
  --button-primary-border: var(--action);
  --button-primary-hover-bg: var(--ox-brand-bright);
  --button-primary-active-bg: var(--ox-brand-7);
  --button-primary-shadow: none;
  --button-primary-hover-shadow: 0 0 0 6px color-mix(in srgb, var(--ox-brand) 12%, transparent), 0 12px 36px -12px color-mix(in srgb, var(--ox-brand) 75%, transparent);
  --l-surface: var(--ox-dark-panel);
  --l-raised: var(--ox-dark-hl);
}

:root[data-theme="light"] {
  --l-surface: var(--ox-light-void);
  --l-raised: var(--ox-light-panel);
  --button-primary-bg: var(--button-inverse-bg);
  --button-primary-fg: var(--button-inverse-fg);
  --button-primary-border: var(--button-inverse-bg);
  --button-primary-hover-bg: var(--button-inverse-hover-bg);
  --button-primary-active-bg: var(--button-inverse-active-bg);
  --button-primary-hover-shadow: none;
}

body[data-page="home"] .btn-primary:active {
  background-color: var(--button-primary-active-bg);
}

body[data-page="home"] .btn-primary:focus-visible {
  box-shadow: 0 0 0 3px var(--button-focus-halo);
}

body[data-page="home"] .l-eyebrow::before {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-mark) 12%, transparent);
}

body[data-page="home"] :is(.gf, [fill="#D4AF37"]) {
  fill: var(--gold-mark);
}

body[data-page="home"] :is(a, button):focus-visible {
  outline-color: var(--ring);
}

body[data-page="home"] ::selection {
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
}