@import url('https://fonts.googleapis.com/css2?family=Spline+Sans+Mono:ital,wght@0,300..700;1,300..700&display=swap');

/*
 * Tocabe Theme — Design Tokens
 * Color palette, typography rules, and spacing values as CSS custom properties
 * Per: tocabe-brand-voice SKILL
 */

:root {
  /* =====================================================
     COLOR PALETTE (8 colors — locked brand spec)
     ===================================================== */
  
  /* Primary Colors */
  --color-primary-purple: #280F43; /* fallback: #280F43 */
  --color-secondary-purple: #8D5383; /* fallback: #8D5383 */

  /* Earth / Nature Accents */
  --color-sage-olive: #76784D; /* fallback: #76784D */
  --color-light-sage: #A1A281; /* fallback: #A1A281 */

  /* Neutrals */
  --color-warm-neutral: #C5C5BB; /* fallback: #C5C5BB */
  --color-off-white: #ECE9DE; /* fallback: #ECE9DE */

  /* Gold Accents */
  --color-warm-gold: #B1A057; /* fallback: #B1A057 */
  --color-bright-gold: #E1AF0C; /* fallback: #E1AF0C */

  /* =====================================================
     SECTION BACKGROUND ROLES
     ===================================================== */

  --color-section-bg-light:    #f7f5f0;  /* Guiding Principles, Marketplace Preview, Partners teaser */
  --color-section-bg-cream:    #f0ede6;  /* Locations teaser */
  --color-section-bg-lavender: #eeecf4;  /* Milestones (Our Story) — purple-tinted section bg */
  --color-bg-charcoal:      #34303a;  /* Impact Metrics — approved Decision 2 */
  --color-surface-card:     #ffffff;  /* white card surfaces (guiding-principles, marketplace, story-cards) */
  --color-input-bg:         #fffdf0;  /* Community Signup email input background */

  /* =====================================================
     BORDER & SURFACE
     ===================================================== */

  --color-border-card:          #ECE6D8;  /* card borders, dividers */
  --color-border-section:       #E4DDCD;  /* section top/bottom dividers */
  --color-border-btn-secondary: #C3BCA9;  /* ghost / secondary button border */
  --color-surface-inset:        #FAF8F2;  /* inner-card tint */
  --color-today-highlight:      #FBF3D8;  /* today row in hours schedule */

  /* =====================================================
     TEXT ROLES
     ===================================================== */

  --color-text-dark:          #2a2420;  /* near-black warm — headings, card titles, breadcrumb current page */
  --color-text-muted:         #5a5547;
  --color-text-label:         #6b6358;
  --color-text-on-dark-muted: rgba(236,233,222,0.78);
  --color-text-body-warm:     #6A6253;  /* body copy on cream / warm-white */
  --color-text-on-gold:       #2A2410;  /* text on bright-gold buttons */

  /* =====================================================
     ALPHA UTILITIES (brand colors at opacity — avoids hardcoded rgba)
     ===================================================== */

  --color-purple-a20:    rgba(40,15,67,0.20);
  --color-purple-a48:    rgba(40,15,67,0.48);
  --color-purple-a78:    rgba(40,15,67,0.78);
  --color-sage-a45:      rgba(161,162,129,0.45);
  --color-off-white-a20: rgba(236,233,222,0.20);
  --color-off-white-a40: rgba(236,233,222,0.40);
  --color-off-white-a50: rgba(236,233,222,0.50);

  /* Join-on-gold band — shared across Network, Our Story, Community Signup */
  --join-eyebrow: #7a6420;           /* brown-on-gold eyebrow label */
  --join-heading: #3a2a08;           /* brown-on-gold heading */
  --join-body:    rgba(58,42,8,0.72);/* brown-on-gold body text */

  /* =====================================================
     STATUS SEMANTIC (open/closed badge)
     ===================================================== */

  --color-status-open:    #3F8F57;  /* semantic: store is open */
  --color-status-closing: #C98A1E;  /* semantic: closing within 1hr */
  --color-status-closed:  #B0584F;  /* semantic: closed */

  /* =====================================================
     TYPOGRAPHY (locked brand spec)
     Font: Nexa (primary typeface)
     ===================================================== */
  
  /* Font Family Stack */
  --font-family-primary: 'nexa', 'Outfit', system-ui, sans-serif;
  --font-display:        'nexa', 'Outfit', system-ui, sans-serif;
  --font-body:           'nexa', 'Outfit', system-ui, sans-serif;
  --font-family-mono:    'Spline Sans Mono', monospace; /* Decision 9 */
  
  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  
  /* =====================================================
     TYPOGRAPHY RULES (per Brand Compass spec)
     ===================================================== */
  
  /* H1 / Headers */
  /* Font: Nexa Bold | Case: UPPERCASE | Line spacing: 1 */
  --font-size-h1: 3rem;
  --font-weight-h1: var(--font-weight-bold);
  --line-height-h1: 1;
  --letter-spacing-h1: 0;
  --letter-spacing-heading: 0.05em;
  --text-transform-h1: uppercase;
  
  /* H2 / Subheaders */
  /* Font: Nexa Regular | Case: UPPERCASE | Letter spacing: 15 | Line spacing: 1.3 */
  /* NOTE: Brand Compass "Letter spacing 15" interpreted as 15/1000 em (design-tool tracking units). */
  /* If Figma/Illustrator source files show a different unit, update this value. */
  --font-size-h2: 1.75rem;
  --font-weight-h2: var(--font-weight-regular);
  --line-height-subheader: 1.3;
  --letter-spacing-subheader: 0.015em;
  --text-transform-h2: uppercase;
  
  /* Body Copy */
  /* Font: Nexa Regular | Case: Sentence case | Letter spacing: -39 | Line spacing: 1.3 */
  /* NOTE: Brand Compass "Letter spacing -39" interpreted as -39/1000 em (design-tool tracking units). */
  /* If Figma/Illustrator source files show a different unit, update this value. */
  --font-size-body: 1rem;
  --font-weight-body: var(--font-weight-regular);
  --line-height-body: 1.3;
  --letter-spacing-body: -0.039em;
  --text-transform-body: none;
  
  /* CTAs */
  /* Font: Nexa Regular Underline | Case: UPPERCASE | Letter spacing: 15 | Line spacing: 1.3 */
  --font-size-cta: 0.875rem;
  --font-weight-cta: var(--font-weight-regular);
  --line-height-cta: 1.3;
  --letter-spacing-cta: 0.015em;
  --letter-spacing-nav: 0.08em;
  --text-transform-cta: uppercase;
  --text-decoration-cta: underline;
  
  /* Pull Quotes / Bold Statements */
  /* Font: Nexa Bold | Case: ALL CAPS | Line spacing: 1 */
  --font-size-quote: 1.5rem;
  --font-weight-quote: var(--font-weight-bold);
  --line-height-quote: 1;
  --letter-spacing-quote: 0;
  --text-transform-quote: uppercase;
  
  /* =====================================================
     SPACING & RHYTHM
     ===================================================== */
  
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;

  /* Section rhythm — fluid clamp values from design-tokens.json */
  --section-padding-y:        clamp(56px, 7vw, 96px);
  --section-padding-y-teaser: clamp(28px, 4vw, 44px);
  --section-padding-x:        clamp(24px, 5vw, 72px);
  --max-width-content:        1280px;
  --nav-height:               72px;

  /* Card layout */
  --spacing-card-gap:    24px;  /* Decision 6 — design-tokens.json card-gap */
  --spacing-card-gap-sm: 20px;

  /* =====================================================
     RADII
     ===================================================== */

  --radius-card:       10px;
  --radius-card-large: 12px;
  --radius-card-xl:    14px;  /* menu card radius (hi-fi spec) */
  --radius-button:     8px;
  --radius-pill:       22px;
  --radius-tag:        7px;

  /* =====================================================
     SHADOWS
     ===================================================== */

  --shadow-card:            0 1px 3px rgba(0,0,0,0.08);
  --shadow-menu-card:       0 3px 16px rgba(42,36,32,0.05);  /* menu card warm-tinted ambient lift */
  --shadow-card-hover:      0 8px 24px rgba(10,3,20,0.22);
  --shadow-card-hover-gold: 0 8px 24px rgba(40,15,67,0.28); /* card 4 Build With Us — gold tile needs purple tint */
  --shadow-dropdown:        0 24px 50px rgba(10,3,20,0.55);

  /* =====================================================
     FOCUS RING
     ===================================================== */

  --focus-ring-color: var(--color-primary-purple);

  /* =====================================================
     BREAKPOINTS (for responsive design)
     ===================================================== */

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* =====================================================
   GLOBAL FOCUS STYLE
   ===================================================== */

:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 3px;
}

/* =====================================================
   REDUCED MOTION
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================
   UTILITY CLASSES (optional, for quick typography setup)
   ===================================================== */

.text-h1 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  text-transform: var(--text-transform-h1);
  letter-spacing: var(--letter-spacing-h1);
  margin: 0;
}

.text-h2 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-subheader);
  text-transform: var(--text-transform-h2);
  letter-spacing: var(--letter-spacing-subheader);
  margin: 0;
}

.text-body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  text-transform: var(--text-transform-body);
  letter-spacing: var(--letter-spacing-body);
  margin: 0;
}

.text-cta {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-cta);
  font-weight: var(--font-weight-cta);
  line-height: var(--line-height-cta);
  text-transform: var(--text-transform-cta);
  letter-spacing: var(--letter-spacing-cta);
  text-decoration: var(--text-decoration-cta);
}

.text-quote {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-quote);
  font-weight: var(--font-weight-quote);
  line-height: var(--line-height-quote);
  text-transform: var(--text-transform-quote);
  letter-spacing: var(--letter-spacing-quote);
  margin: 0;
}

/* =====================================================
   BRAND COLOR UTILITIES (optional)
   ===================================================== */

.bg-primary-purple { background-color: var(--color-primary-purple); }
.bg-secondary-purple { background-color: var(--color-secondary-purple); }
.bg-sage-olive { background-color: var(--color-sage-olive); }
.bg-light-sage { background-color: var(--color-light-sage); }
.bg-warm-neutral { background-color: var(--color-warm-neutral); }
.bg-off-white { background-color: var(--color-off-white); }
.bg-warm-gold { background-color: var(--color-warm-gold); }
.bg-bright-gold { background-color: var(--color-bright-gold); }

.text-primary-purple { color: var(--color-primary-purple); }
.text-secondary-purple { color: var(--color-secondary-purple); }
.text-sage-olive { color: var(--color-sage-olive); }
.text-light-sage { color: var(--color-light-sage); }
.text-warm-neutral { color: var(--color-warm-neutral); }
.text-off-white { color: var(--color-off-white); }
.text-warm-gold { color: var(--color-warm-gold); }
.text-bright-gold { color: var(--color-bright-gold); }

/* =====================================================
   LAYOUT VARIANTS
   ===================================================== */

/* layout--minimal-header: used by landing-page.html.
   Suppresses global nav; centers wordmark. Class applied to <body> in template.
   NOTE: Selector names below are estimated from Focus theme patterns.
   Verify against actual header HTML once nav template is built in Phase 3. */

.layout--minimal-header .site-header,
.layout--minimal-header .header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.layout--minimal-header .site-nav,
.layout--minimal-header .header__navigation,
.layout--minimal-header .menu,
.layout--minimal-header .navigation {
  display: none;
}

.layout--minimal-header .site-footer-nav,
.layout--minimal-header .footer__navigation,
.layout--minimal-header .footer-links {
  display: none;
}

.layout--minimal-header .mobile-trigger,
.layout--minimal-header .hamburger,
.layout--minimal-header .mobile-menu-toggle {
  display: none;
}

/* =====================================================
   FOCUS THEME GLOBAL MAX-WIDTH OVERRIDE
   The Focus theme registers a global stylesheet that caps body or
   .body-container width. This resets it site-wide so our page sections
   control their own max-width via --max-width-content on inner containers.
   ===================================================== */

/*
 * Focus theme global max-width override
 * The Focus theme registers a global stylesheet that caps body or
 * .body-container width. This resets it site-wide so our page sections
 * control their own max-width via --max-width-content on inner containers.
 */
body,
.body-container,
.page-content,
.container {
  max-width: none !important;
}

/* =====================================================
   BREADCRUMB — shared component (all inner pages)
   Partial: theme/templates/partials/breadcrumb.html
   Include pattern:
     
     /* Missing Template at Path: \'tocabe-hubspot-theme\/css\/partials\/breadcrumb.html\' */
   Colors: --color-text-label for Home+sep (hi-fi #9b9482, nearest global #a59e8b — minor near-miss)
           --color-text-dark  for current page (hi-fi #2a2420 — exact match, promoted to global token)
   ===================================================== */

/* Selectors scoped under .breadcrumb (the <nav> wrapper) to raise specificity
   to (0,2,0) and beat Focus theme element+class rules that otherwise win. */
.breadcrumb .breadcrumb__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: var(--spacing-sm) var(--section-padding-x);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.breadcrumb .breadcrumb__home {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-label);
  text-decoration: none;
  line-height: 1;
}

.breadcrumb .breadcrumb__home:hover {
  color: var(--color-text-muted);
  text-decoration: underline;
}

.breadcrumb .breadcrumb__sep {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-label);
  line-height: 1;
}

.breadcrumb .breadcrumb__current {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  line-height: 1;
}