/*
 * Syncfetti foundations: the shared source of truth for design tokens.
 * Load theme.css, then components.css, then the surface composition stylesheet.
 * components.css owns shared components and layout contracts.
 * The console overrides semantic roles at its root for quieter work surfaces.
 *
 * Use semantic roles for UI treatments, and brand pigments for paper artwork.
 * Reuse a token when its role fits, not merely because its value looks close.
 * Before extending the system, propose the missing role and affected uses.
 * Document accepted additions here or beside the owning component.
 *
 * Identity: logo.svg is the approved paper-circle mark. Pair it with the
 * lowercase syncfetti wordmark in the display face. Decorative copies have
 * empty alternative text and must not obscure content or controls.
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans.ttf") format("truetype");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  /* Brand pigments: plum ink, berry emphasis, mint, coral, and yellow paper.
   * Primary means links and selection; action is the primary button role. */
  --cds-color-ink: #302038;
  --cds-color-primary: #b52b65;
  --cds-color-primary-hover: #92204f;
  --cds-color-secondary: #934064;
  --cds-color-mint: #8ddbbd;
  --cds-color-canvas: #fcf8fb;
  --cds-color-paper: #ffffff;

  --cds-color-coral: #ff806b;
  --cds-color-yellow: #f6d965;
  --cds-color-success: #205b45;
  --cds-color-focus: var(--cds-color-primary);

  /* Default roles: yellow actions with plum text; plum introductions with
   * pale text. The console replaces action and neutral surface roles.
   * On inverse surfaces, use yellow focus; raised controls keep berry focus. */
  --cds-color-action: var(--cds-color-yellow);
  --cds-color-action-hover: #ffe795;
  --cds-color-action-text: var(--cds-color-ink);
  --cds-color-surface-inverse: var(--cds-color-ink);
  --cds-color-text-inverse: var(--cds-color-canvas);
  --cds-color-text-inverse-muted: #e3d7e7;
  --cds-color-border-inverse: #69566f;
  --cds-color-surface-success: #e2f4ec;
  --cds-color-ink-hover: #4d345a;
  --cds-color-focus-halo: rgba(181, 43, 101, .18);

  /* Surfaces and boundaries: raised for cards and inputs, subtle for nested
   * groups, accent for selection. Muted text must remain readable. */
  --cds-color-text-muted: #6b5e71;
  --cds-color-border: #e5dbe4;
  --cds-color-border-strong: #a798ac;
  --cds-color-border-card: #dccedb;
  --cds-color-border-price: #d5bfd0;
  --cds-color-border-accent: #d9b1c4;
  --cds-color-border-footer: #dfbfce;
  --cds-color-surface-subtle: #faf5f9;
  --cds-color-surface-raised: var(--cds-color-paper);
  --cds-color-surface-accent: #f9e7ef;
  --cds-color-surface-footer: #f4dce7;
  --cds-color-surface-ring: #f9edf3;
  --cds-color-line-soft: #ede3eb;
  --cds-color-primary-faint: rgba(181, 43, 101, .05);
  --cds-color-canvas-glass: rgba(252, 248, 251, .94);
  --cds-color-paper-glass: rgba(255, 255, 255, .6);

  /* Feedback: pair success, warning, and danger colors with visible text.
   * Never communicate status through color or decoration alone.
   * Elevation: panel for overlays, surface for work areas, control for inputs,
   * drag for the item being moved. The console disables surface shadows. */
  --cds-color-danger: #8c2929;
  --cds-color-danger-hover: #6f1f1f;
  --cds-color-danger-border: #e6c0bd;
  --cds-color-danger-surface: #fff2f1;
  --cds-color-warning: #805819;
  --cds-color-warning-border: #dfc78f;
  --cds-color-warning-surface: #fff8e8;
  --cds-shadow-panel: 0 .75rem 2.25rem rgba(48, 32, 56, .07);
  --cds-shadow-surface: 0 .4rem 1.7rem rgba(48, 32, 56, .045);
  --cds-shadow-control: 0 .2rem .7rem rgba(48, 32, 56, .04);
  --cds-shadow-drag: 0 .8rem 1.5rem rgba(48, 32, 56, .16);

  /* Typography: display for headings and wordmark; body for prose and controls;
   * utility for metadata. Reuse the size and line-height scales below.
   * Existing optical sizes and fluid headings live beside their components;
   * they are not additional shared scale steps. */
  --cds-font-display: "Bricolage Grotesque", ui-rounded, sans-serif;
  --cds-font-body: "DM Sans", system-ui, sans-serif;
  --cds-font-utility: "DM Sans", system-ui, sans-serif;
  --cds-font-size-1: .625rem;
  --cds-font-size-2: .75rem;
  --cds-font-size-3: .875rem;
  --cds-font-size-4: 1rem;
  --cds-font-size-5: 1.125rem;
  --cds-font-size-6: 1.5rem;
  --cds-font-size-7: 2.25rem;
  --cds-font-size-display: clamp(3.3rem, 7vw, 6.35rem);
  --cds-line-tight: .94;
  --cds-line-body: 1.5;
  --cds-line-reading: 1.65;

  /* Spacing: quarter-rem base unit. Use this scale for layout rhythm.
   * Component geometry and responsive calculations belong to their rules. */
  --cds-space-1: .25rem;
  --cds-space-2: .5rem;
  --cds-space-3: .75rem;
  --cds-space-4: 1rem;
  --cds-space-5: 1.5rem;
  --cds-space-6: 2rem;
  --cds-space-7: 3rem;
  --cds-space-8: 4rem;
  --cds-space-9: 6rem;

  /* Shape: control for actions and inputs, panel for nested groups, card for
   * standalone surfaces, round for pills. Use 50% for circular artwork.
   * Card shadow is the expressive public-site treatment.
   * Keep focus visible; suppress optional motion for reduced-motion users. */
  --cds-radius-control: .85rem;
  --cds-radius-panel: .65rem;
  --cds-radius-card: 1.5rem;
  --cds-radius-round: 999px;
  --cds-shadow-card: 0 2rem 4.5rem rgba(48, 32, 56, .10);
  --cds-focus-ring: 0 0 0 3px var(--cds-color-focus);
  --cds-content-width: 72rem;
  --cds-transition-fast: 140ms ease;
}