/* ============================================
   Eleven Finger Products — Design Tokens
   variables.css
   ============================================ */

:root {
  /* ── Color: Primary ── */
  --color-brand:        #886426;
  --color-accent:       #A67C3D;
  --color-soft-gold:    #CFAF7A;
  --color-light-beige:  #DCC9A6;

  /* ── Color: Secondary (Green) ── */
  --color-green-deep:   #6B7F58;
  --color-green-sage:   #8FA68A;
  --color-green-soft:   #B7C6B0;

  /* ── Color: Neutral ── */
  --color-bg:           #F7F5F2;
  --color-bg-section:   #ECE9E3;
  --color-border:       #E6E3DD;
  --color-dark-brown:   #5C4B3A;
  --color-focus:        #886426;

  /* ── Color: Text ── */
  --color-text-primary:   #5C4B3A;
  --color-text-secondary: #7A6D60;
  --color-text-on-dark:   #F7F5F2;

  /* ── Typography: Font Family ── */
  --font-hero:    "Noto Serif JP", serif;
  --font-heading: "Cormorant Garamond", serif;
  --font-body:    "Noto Sans JP", sans-serif;

  /* ── Typography: Type Scale ── */
  --font-size-display: clamp(2.5rem, 5vw, 4rem);    /* 64px → 40px */
  --font-size-h1:      clamp(1.75rem, 4vw, 3rem);   /* 48px → 28px */
  --font-size-h2:      2rem;                          /* 32px */
  --font-size-h3:      1.5rem;                        /* 24px */
  --font-size-h4:      1.25rem;                       /* 20px */
  --font-size-body:    1rem;                           /* 16px */
  --font-size-nav:     0.875rem;                       /* 14px */
  --font-size-small:   0.875rem;                       /* 14px */
  --font-size-caption: 0.75rem;                        /* 12px */

  /* ── Typography: Font Weight ── */
  --font-weight-regular: 400;
  --font-weight-medium:  500;

  /* ── Typography: Line Height ── */
  --line-height-display: 1.05;
  --line-height-h1:      1.85;
  --line-height-h2:      1.4;
  --line-height-h3:      1.3;
  --line-height-h4:      1.6;
  --line-height-body:    1.75;
  --line-height-nav:     1.6;
  --line-height-small:   1.8;
  --line-height-caption: 1.6;

  /* ── Typography: Letter Spacing ── */
  --letter-spacing-display: 0.01em;  /* Cormorant Garamond */
  --letter-spacing-h1:      0.14em;  /* Noto Serif JP + palt */
  --letter-spacing-heading:  0.04em; /* H2〜H4, Nav */
  --letter-spacing-body:    0.02em;  /* Body, Small, Caption */

  /* ── Spacing Scale (4px base) ── */
  --space-1:  0.25rem;   /*   4px */
  --space-2:  0.5rem;    /*   8px */
  --space-3:  0.75rem;   /*  12px */
  --space-4:  1rem;      /*  16px */
  --space-5:  1.5rem;    /*  24px */
  --space-6:  2rem;      /*  32px */
  --space-7:  3rem;      /*  48px */
  --space-8:  4rem;      /*  64px */
  --space-9:  6rem;      /*  96px */
  --space-10: 8rem;      /* 128px */

  /* ── Layout ── */
  --container-max: 80rem;   /* 1280px */
  --container-pad: 2.5rem;  /*   40px (mobile: 1.25rem / 20px) */
  --header-h:      5rem;    /*   80px (mobile: 4rem / 64px) */

  /* ── Border Radius ── */
  --radius-sm:   0.25rem;   /*  4px */
  --radius-md:   0.5rem;    /*  8px */
  --radius-lg:   1rem;      /* 16px */
  --radius-full: 9999px;

  /* ── Shadow (warm-toned: #5C4B3A base) ── */
  --shadow-sm: 0 1px 3px rgba(92, 75, 58, 0.08);
  --shadow-md: 0 4px 12px rgba(92, 75, 58, 0.12);
  --shadow-lg: 0 8px 24px rgba(92, 75, 58, 0.16);

  /* ── Transition ── */
  --transition-fast: 200ms;
  --transition-base: 300ms;
  --transition-slow: 600ms;
  --ease-default: ease-out;
  --ease-smooth:  cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ── z-index ── */
  --z-header:   100;
  --z-overlay:  200;
  --z-menu:     300;
  --z-lightbox: 400;
}

/* ── Breakpoints (reference — use px in media queries) ──
   Mobile:  375px  (base)
   Tablet:  768px  (min-width)
   Desktop: 1440px (min-width)
   ───────────────────────────────────────────── */