/*
  ╔══════════════════════════════════════════════════════════════╗
  ║  RUBATSCHER TISCHLEREI — BRAND TOKENS                       ║
  ║  Version 1.0 · 2025                                         ║
  ║                                                             ║
  ║  Usage for Claude Code:                                     ║
  ║  "All design decisions live in brand-tokens.css.            ║
  ║   Never hardcode colors, fonts, or spacing values.          ║
  ║   Always reference these custom properties."                ║
  ╚══════════════════════════════════════════════════════════════╝
*/

:root {

  /* ── COLORS ──────────────────────────────────────────────── */

  /* Primary scale — light to dark */
  --color-warm-white:     #F7F5F2;  /* Primary background. Pages, surfaces, paper. */
  --color-esche:          #E8DFD0;  /* Eschenholz. Accent surfaces, image placeholders, warm fields. Use sparingly. */
  --color-stein:          #C4BBB0;  /* Naturstein. Borders, dividers, secondary surfaces. */
  --color-graphit:        #3A3937;  /* Graphitfilz / Valchromat. Secondary text, inverted boxes, CTAs. */
  --color-schwarz:        #1C1B19;  /* Beinahe-Schwarz. Primary text, headlines, navigation. */

  /* Derived / aliases */
  --color-text-primary:   var(--color-schwarz);
  --color-text-secondary: var(--color-graphit);
  --color-text-muted:     #6B6460;  /* Mid-tone. Captions, labels, meta. */
  --color-bg-primary:     var(--color-warm-white);
  --color-bg-accent:      var(--color-esche);
  --color-border:         var(--color-stein);
  --color-border-subtle:  #D8D0C6;  /* Very subtle lines, hairlines. */


  /* ── TYPOGRAPHY ──────────────────────────────────────────── */

  /*
    Heading font: Cormorant Garamond
    Load via Google Fonts:
    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');
  */
  --font-heading:  'Cormorant Garamond', Georgia, serif;

  /*
    Body font: Inter
    Load via Google Fonts:
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
  */
  --font-body:     'Inter', system-ui, sans-serif;

  /* Font weights */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;

  /* Type scale */
  --text-display:  clamp(42px, 7vw, 72px);  /* H1 display — Cormorant Garamond Light */
  --text-h2:       clamp(22px, 4vw, 32px);  /* Subheadings — Cormorant Garamond Regular */
  --text-h3:       clamp(18px, 2.5vw, 24px);
  --text-body:     16px;                    /* Inter Light */
  --text-small:    14px;
  --text-caption:  11px;                    /* Inter Regular, all-caps, tracked */

  /* Line heights */
  --lh-display:    1.05;
  --lh-heading:    1.2;
  --lh-body:       1.8;
  --lh-tight:      1.3;

  /* Letter spacing */
  --ls-display:    -0.01em;  /* Heading display — slightly tight */
  --ls-subheading: 0.01em;
  --ls-body:       0em;
  --ls-caption:    0.14em;   /* All-caps labels — wide tracking */
  --ls-wordmark:   0.22em;   /* RUBATSCHER logotype */


  /* ── SPACING ──────────────────────────────────────────────── */

  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   32px;
  --space-xl:   64px;
  --space-2xl:  96px;
  --space-3xl:  128px;

  /* Section padding */
  --section-padding-y:  clamp(64px, 10vw, 120px);
  --section-padding-x:  clamp(20px, 6vw, 80px);

  /* Content max-width */
  --max-width-content:  1200px;
  --max-width-text:     680px;   /* Max width for body copy columns */


  /* ── LAYOUT ───────────────────────────────────────────────── */

  --grid-columns:   12;
  --grid-gap:       clamp(16px, 2vw, 24px);

  /* Border radius — restrained, not rounded */
  --radius-sm:  2px;
  --radius-md:  4px;

  /* Divider */
  --border-rule:  0.5px solid var(--color-border);
  --border-subtle: 0.5px solid var(--color-border-subtle);


  /* ── COMPONENT TOKENS ────────────────────────────────────── */

  /* Navigation */
  --nav-bg:           var(--color-warm-white);
  --nav-text:         var(--color-schwarz);
  --nav-text-muted:   var(--color-text-muted);
  --nav-font:         var(--font-body);
  --nav-font-size:    10px;
  --nav-tracking:     0.14em;
  --nav-height:       60px;

  /* Buttons / CTAs */
  --btn-bg:           var(--color-schwarz);
  --btn-text:         var(--color-warm-white);
  --btn-font-size:    10px;
  --btn-tracking:     0.18em;
  --btn-padding:      12px 24px;
  --btn-radius:       var(--radius-sm);

  /* Dark section (inverted) */
  --dark-bg:          var(--color-schwarz);
  --dark-text:        var(--color-warm-white);
  --dark-text-muted:  var(--color-text-muted);
  --dark-accent:      var(--color-esche);

  /* Accent / warm section */
  --accent-bg:        var(--color-esche);
  --accent-text:      var(--color-schwarz);

}


/*
  ── TYPOGRAPHY BASE STYLES ──────────────────────────────────

  Apply these globally. Claude Code should extend, not override.
*/

body {
  font-family:   var(--font-body);
  font-weight:   var(--fw-light);
  font-size:     var(--text-body);
  line-height:   var(--lh-body);
  color:         var(--color-text-primary);
  background:    var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
}

h1, .display {
  font-family:   var(--font-heading);
  font-weight:   var(--fw-light);
  font-size:     var(--text-display);
  line-height:   var(--lh-display);
  letter-spacing: var(--ls-display);
  color:         var(--color-text-primary);
}

h2 {
  font-family:   var(--font-heading);
  font-weight:   var(--fw-regular);
  font-size:     var(--text-h2);
  line-height:   var(--lh-heading);
  letter-spacing: var(--ls-subheading);
}

h3 {
  font-family:   var(--font-heading);
  font-weight:   var(--fw-regular);
  font-size:     var(--text-h3);
  line-height:   var(--lh-heading);
}

p {
  font-family:   var(--font-body);
  font-weight:   var(--fw-light);
  font-size:     var(--text-body);
  line-height:   var(--lh-body);
  color:         var(--color-text-secondary);
  max-width:     var(--max-width-text);
}

/* Caption / label style */
.label, .caption, figcaption {
  font-family:   var(--font-body);
  font-weight:   var(--fw-regular);
  font-size:     var(--text-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color:         var(--color-text-muted);
}

/* Wordmark */
.wordmark {
  font-family:   var(--font-body);
  font-weight:   var(--fw-light);
  font-size:     13px;
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
  color:         var(--color-text-primary);
}

hr, .rule {
  border: none;
  border-top: var(--border-rule);
  margin: var(--space-xl) 0;
}


/*
  ── USAGE NOTES FOR CLAUDE CODE ─────────────────────────────

  1. Cormorant Garamond is ONLY used at heading scale (h1, h2, h3).
     Never in navigation, body copy, captions, or buttons.

  2. Italic Cormorant is used for the emotional/poetic line in headings.
     Example: <h1>Handwerk, <em>das wirkt.</em></h1>

  3. The accent color (--color-esche) appears only as a background surface
     or image placeholder — never as text color or border.

  4. No gradients. No shadows except functional focus rings.
     No rounded corners beyond --radius-md (4px).

  5. Text is always left-aligned. Never centered, never right-aligned
     except for metadata/prices in table contexts.

  6. Sections are separated by a single 0.5px rule (--border-rule),
     never by color blocks.

  7. Whitespace is structural. Minimum section padding: --section-padding-y.
     Do not reduce spacing to fit more content.

  8. The dark strip pattern (--dark-bg with italic Cormorant quote in
     --dark-accent color) can be used as a full-width accent section.
*/