/* =========================================================================
   AUTUMN — Personal Design System
   A warm palette inspired by autumn in Japan: persimmon, maple, ginkgo,
   tea-stained paper, sumi ink, and weathered temple wood.
   ========================================================================= */

/* ---- Webfonts (Google Fonts substitutions — see README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Shippori+Mincho:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =====================================================================
     COLOR — base palette
     Named after the things they are. Hex values are hand-tuned.
     ===================================================================== */

  /* Paper & ink (neutrals) */
  --paper:        #FBF7EE;  /* fresh handmade paper — bright warm white */
  --washi:        #F4ECDC;  /* warm rice paper — primary background */
  --kinari:       #EFE3CC;  /* unbleached cotton — surface */
  --kraft:        #E5D3B3;  /* tea-dyed kraft — raised surface */
  --stone:        #C9B89A;  /* weathered temple stone — borders */
  --bark:         #6B5538;  /* cedar bark — secondary text */
  --sumi:         #2A1F17;  /* ink stick — primary text */
  --kuro:         #1A130D;  /* deep black-brown — display text */

  /* Autumn accents */
  --persimmon:    #D2691E;  /* kaki — primary accent, buttons, links */
  --persimmon-deep:#A8501A;
  --maple:        #B33A1F;  /* momiji — emphasis, alerts */
  --maple-deep:   #7E2515;
  --ginkgo:       #C89B3C;  /* icho gold — highlight */
  --ginkgo-soft:  #E0B964;
  --moss:         #6B7A3C;  /* temple moss — secondary accent */
  --moss-deep:    #4A5628;
  --hinoki:       #8B6F47;  /* cypress wood — tertiary */
  --kuri:         #5C3A21;  /* roasted chestnut */

  /* Semantic surfaces */
  --bg:           var(--washi);
  --bg-raised:    var(--kinari);
  --bg-sunken:    #EBDFC4;
  --surface:      #F8F1E3;       /* card on bg */
  --overlay:      rgba(42, 31, 23, 0.55);

  /* Semantic text */
  --fg-1:         var(--sumi);    /* primary */
  --fg-2:         var(--bark);    /* secondary */
  --fg-3:         #8A7558;        /* tertiary / captions */
  --fg-muted:     #A89478;        /* placeholder */
  --fg-inverse:   var(--washi);

  /* Borders & dividers */
  --border:       #D9C7A6;
  --border-strong: var(--stone);
  --divider:      rgba(107, 85, 56, 0.18);

  /* Semantic intent */
  --accent:       var(--persimmon);
  --accent-hover: var(--persimmon-deep);
  --link:         var(--maple-deep);
  --success:      var(--moss);
  --warning:      var(--ginkgo);
  --danger:       var(--maple);

  /* =====================================================================
     TYPOGRAPHY — font stacks
     ===================================================================== */
  --font-display: 'Fraunces', 'Shippori Mincho', 'Hoefler Text', Garamond, serif;
  --font-serif:   'Shippori Mincho', 'Fraunces', 'Hoefler Text', Garamond, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (modular — 1.25 minor third) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  4rem;      /* 64 */
  --text-5xl:  5.5rem;    /* 88 */

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-base:  1.55;
  --leading-loose: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-widest: 0.18em;

  /* =====================================================================
     SPACING — 4px base, named after a tea ceremony's quiet rhythm
     ===================================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* =====================================================================
     RADIUS — soft, hand-shaped
     ===================================================================== */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* =====================================================================
     SHADOW — warm-cast, low and soft (like late afternoon sun)
     ===================================================================== */
  --shadow-xs: 0 1px 2px rgba(92, 58, 33, 0.08);
  --shadow-sm: 0 2px 4px rgba(92, 58, 33, 0.08), 0 1px 2px rgba(92, 58, 33, 0.06);
  --shadow-md: 0 6px 16px rgba(92, 58, 33, 0.10), 0 2px 4px rgba(92, 58, 33, 0.06);
  --shadow-lg: 0 18px 40px rgba(92, 58, 33, 0.14), 0 4px 8px rgba(92, 58, 33, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(92,58,33,0.06);

  /* =====================================================================
     MOTION
     ===================================================================== */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  140ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
}

/* =========================================================================
   SEMANTIC ELEMENTS — defaults that match the system
   ========================================================================= */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; color: var(--fg-1); margin: 0; text-wrap: balance; }
h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 300; }
h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 400; }
h3 { font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: 500; }
h4 { font-size: var(--text-lg); line-height: var(--leading-snug); font-weight: 500; }
h5 { font-size: var(--text-md); line-height: var(--leading-snug); font-weight: 600; font-family: var(--font-sans); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
h6 { font-size: var(--text-sm); line-height: var(--leading-snug); font-weight: 600; font-family: var(--font-sans); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--fg-2); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; max-width: 64ch; }
.lede { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-loose); color: var(--fg-2); font-style: italic; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--stone); transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--persimmon-deep); text-decoration-color: currentColor; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-sunken); padding: 0.12em 0.4em; border-radius: var(--radius-sm); color: var(--kuri); }
pre { font-family: var(--font-mono); background: var(--bg-sunken); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; border-left: 3px solid var(--persimmon); }
pre code { background: none; padding: 0; }

blockquote { border-left: 2px solid var(--persimmon); padding-left: var(--space-5); margin: var(--space-5) 0; font-family: var(--font-serif); font-style: italic; color: var(--fg-2); font-size: var(--text-md); line-height: var(--leading-loose); }

hr { border: 0; border-top: 1px solid var(--divider); margin: var(--space-6) 0; }

::selection { background: var(--ginkgo-soft); color: var(--kuro); }

/* =========================================================================
   TEXTURE — a subtle paper grain you can layer onto backgrounds
   ========================================================================= */
.washi-texture {
  background-color: var(--washi);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(168,80,26,0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(107,122,60,0.03) 0%, transparent 40%);
}