/* =========================================================================
   Xiaomo (小抹) — Design Tokens v2 (CookieAnn / 玲娜贝儿 cottage)
   Import this file in any HTML artifact:
     <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================= */

/* --- Webfonts -------------------------------------------------------------
   Chinese: 江城圆体 (5 weights, self-hosted from /fonts).
   Latin:   Quicksand (display + numerals) + Caveat (handwritten accents).
--------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Nunito:wght@400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Jiangcheng Yuan';
  src: url('./fonts/JiangChengYuanTi-300W.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jiangcheng Yuan';
  src: url('./fonts/JiangChengYuanTi-400W.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jiangcheng Yuan';
  src: url('./fonts/JiangChengYuanTi-500W.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jiangcheng Yuan';
  src: url('./fonts/JiangChengYuanTi-600W.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jiangcheng Yuan';
  src: url('./fonts/JiangChengYuanTi-700W.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === Color =============================================================
     Butter-cream + caramel cottage palette.
     CookieAnn yellow as base, dachshund brown/caramel on top, ink-brown text,
     pink demoted to occasional accent only.
  ======================================================================= */

  /* Backgrounds (butter-cream) */
  --cream-50:   #FFFDF6;   /* surface tops */
  --cream-100:  #FFF8DD;   /* page background — buttery */
  --cream-200:  #FBEFC2;   /* secondary background, drawer */
  --cream-300:  #F4E29A;   /* divider / strong tint */

  /* Caramel (primary) */
  --caramel-100: #FFF1D4;
  --caramel-200: #FBE3B0;
  --caramel-300: #F0D6A6;
  --caramel-400: #E5BA75;   /* CookieAnn yellow */
  --caramel-500: #D9A256;   /* primary surface */
  --caramel-600: #B8852E;   /* deep caramel, hover */
  --caramel-700: #8B6212;

  /* Dachshund browns (display + ink) */
  --brown-300:  #C68A52;    /* light fur */
  --brown-500:  #8B4F32;    /* mid fur */
  --brown-700:  #6B3E2A;    /* dark fur */
  --brown-900:  #4A2A1A;    /* nose / ink / primary text */

  /* Ink-warm grays (text) — never pure black */
  --ink-900:    #4A2A1A;    /* primary text */
  --ink-700:    #6B4A2E;
  --ink-500:    #8B6B43;    /* secondary text */
  --ink-300:    #B5946D;    /* tertiary / placeholder */
  --ink-200:    #D6BD9A;
  --ink-100:    #ECDDC0;

  /* Sky blue (accent / link / "Cute Puppy" handwritten) */
  --sky-100:    #E6F1F8;
  --sky-200:    #C8DEEC;
  --sky-300:    #A6CADD;
  --sky-400:    #7FB6D6;
  --sky-500:    #5A99BD;
  --sky-700:    #2E6B8E;

  /* Mint (success / fulfilled) */
  --mint-100:   #E8F4DC;
  --mint-200:   #D2E9B5;
  --mint-300:   #B8DD90;
  --mint-500:   #7FB855;

  /* Rose (DEMOTED — bows, hearts, blush only) */
  --rose-100:   #FFEFE6;
  --rose-200:   #FFD9C9;
  --rose-300:   #FFB7C2;
  --rose-400:   #FF8DA0;
  --rose-500:   #E36F88;

  /* Lavender (small floral accents — like LinaBell's purple flower) */
  --lavender-300: #D9C5E8;
  --lavender-500: #A789C2;

  /* === Semantic surface / text =========================================== */
  --bg:                var(--cream-100);
  --bg-elevated:       var(--cream-50);
  --bg-sunken:         var(--cream-200);
  --bg-drawer:         var(--cream-200);

  --fg:                var(--ink-900);
  --fg-muted:          var(--ink-500);
  --fg-subtle:         var(--ink-300);
  --fg-on-caramel:     #FFFDF6;
  --fg-on-accent:      #FFFDF6;

  --border:            rgba(217, 162, 86, 0.32);
  --border-strong:     rgba(184, 133, 46, 0.45);
  --border-dashed:     var(--caramel-400);
  --divider:           var(--cream-300);

  --primary:           var(--caramel-500);
  --primary-hover:     var(--caramel-600);
  --primary-press:     var(--caramel-700);

  --accent:            var(--sky-400);
  --accent-hover:      var(--sky-500);
  --accent-press:      var(--sky-700);

  --success:           var(--mint-500);
  --info:              var(--sky-500);
  --warning:           #E89B3F;
  --danger:            var(--rose-500);

  /* === Typography ======================================================== */
  --font-cn-display:   'Jiangcheng Yuan', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-cn-body:      'Jiangcheng Yuan', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-en-display:   'Quicksand', 'Jiangcheng Yuan', system-ui, sans-serif;
  --font-en-body:      'Nunito', 'Jiangcheng Yuan', system-ui, sans-serif;
  --font-en-script:    'Caveat', 'Jiangcheng Yuan', cursive;
  --font-num:          'Quicksand', 'Nunito', system-ui, sans-serif;

  /* combined stacks (use these in components) */
  --font-display:      'Jiangcheng Yuan', 'Quicksand', 'PingFang SC', sans-serif;
  --font-body:         'Jiangcheng Yuan', 'Nunito', 'PingFang SC', sans-serif;

  /* Type scale */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-md:    16px;
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-3xl:   36px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;

  --lh-tight: 1.25;
  --lh-snug:  1.4;
  --lh-body:  1.7;
  --lh-loose: 1.9;

  --tracking-tight:  -0.005em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;

  /* Semantic type roles — Jiangcheng Yuan handles all weights */
  --type-display:   700 var(--fs-4xl)/var(--lh-tight) var(--font-display);
  --type-h1:        700 var(--fs-3xl)/var(--lh-tight) var(--font-display);
  --type-h2:        600 var(--fs-2xl)/var(--lh-snug)  var(--font-display);
  --type-h3:        600 var(--fs-xl)/var(--lh-snug)   var(--font-display);
  --type-h4:        500 var(--fs-lg)/var(--lh-snug)   var(--font-body);
  --type-body:      400 var(--fs-md)/var(--lh-body)   var(--font-body);
  --type-body-sm:   400 var(--fs-sm)/var(--lh-body)   var(--font-body);
  --type-caption:   500 var(--fs-xs)/var(--lh-snug)   var(--font-body);
  --type-button:    600 var(--fs-md)/1                var(--font-display);
  --type-num:       700 var(--fs-2xl)/1               var(--font-num);
  --type-script:    600 var(--fs-xl)/var(--lh-snug)   var(--font-en-script);

  /* === Spacing (4 px base) =============================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 80px;

  /* === Radii ============================================================= */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;   /* inputs */
  --radius-xl:    20px;   /* cards */
  --radius-2xl:   24px;   /* buttons */
  --radius-3xl:   32px;
  --radius-pill:  999px;
  --radius-full:  9999px;

  /* === Shadows (caramel-tinted, never neutral grey) ====================== */
  --shadow-xs:    0 1px 2px  rgba(184, 133, 46, 0.18);
  --shadow-sm:    0 2px 8px  rgba(217, 162, 86, 0.20);
  --shadow-md:    0 4px 20px rgba(217, 162, 86, 0.24);
  --shadow-lg:    0 12px 40px rgba(184, 133, 46, 0.22);
  --shadow-xl:    0 24px 60px rgba(184, 133, 46, 0.26);
  --shadow-inset: inset 0 2px 6px rgba(217, 162, 86, 0.22);
  --shadow-ring:  inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  --shadow-focus: 0 0 0 4px rgba(127, 182, 214, 0.28);

  /* === Motion ============================================================ */
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:  120ms;
  --duration-base:  200ms;
  --duration-slow:  400ms;
  --duration-float: 7s;

  /* === Layout ============================================================ */
  --content-width:  760px;
  --gutter:         var(--space-5);
}

/* === Element defaults ===================================================== */
.xm-root,
body.xm {
  background: var(--bg);
  color: var(--fg);
  font: var(--type-body);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.xm-root h1, .xm h1 { font: var(--type-h1); margin: 0 0 var(--space-4); letter-spacing: var(--tracking-wide); color: var(--ink-900); }
.xm-root h2, .xm h2 { font: var(--type-h2); margin: 0 0 var(--space-3); letter-spacing: var(--tracking-wide); color: var(--ink-900); }
.xm-root h3, .xm h3 { font: var(--type-h3); margin: 0 0 var(--space-3); color: var(--ink-900); }
.xm-root h4, .xm h4 { font: var(--type-h4); margin: 0 0 var(--space-2); color: var(--ink-900); }
.xm-root p,  .xm p  { font: var(--type-body); margin: 0 0 var(--space-3); color: var(--ink-700); }
.xm-root small, .xm small { font: var(--type-caption); color: var(--fg-muted); }
.xm-root a, .xm a { color: var(--sky-500); text-decoration: none; border-bottom: 1px dashed var(--sky-300); }
.xm-root a:hover, .xm a:hover { color: var(--sky-700); border-bottom-color: var(--sky-500); }

/* Display utility classes */
.xm-display    { font: var(--type-display); letter-spacing: var(--tracking-wide); }
.xm-num        { font: var(--type-num); font-variant-numeric: tabular-nums; }
.xm-script     { font: var(--type-script); color: var(--brown-700); }
.xm-caption    { font: var(--type-caption); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Decorative float keyframe — used by background motifs */
@keyframes xm-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}
@keyframes xm-pulse-heart {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
@keyframes xm-spin-soft {
  to { transform: rotate(360deg); }
}