/* Design tokens — 정혜신의 상담학교
 *
 * These are the REAL values, pulled from the Figma file's "01 — Foundations"
 * page (variables, not measured off screenshots). The block below mirrors the
 * Figma token names exactly, so when a designer says "brand/primary" there is
 * one obvious place to look. The short aliases underneath are what the rest of
 * the stylesheets use.
 *
 * Source: file O4VtGLYOrknrIwHLAB6FJ1, page 1:2 "01 — Foundations",
 * frame 6:2. Re-pull with get_variable_defs after any design change.
 *
 * Never hardcode a colour in a component stylesheet — add it here.
 */

:root {
  /* ===== Figma variables ================================================= */

  /* color/surface */
  --color-surface-canvas:  #faf8f4;
  --color-surface-raised:  #ffffff;
  --color-surface-sunken:  #f1eee8;
  --color-surface-inverse: #1f1b16;

  /* color/text */
  --color-text-primary:    #1f1b16;
  --color-text-secondary:  #5c554c;
  --color-text-muted:      #9a9389;
  --color-text-inverse:    #faf8f4;

  /* color/brand */
  --color-brand-primary:       #3f6b5c;
  --color-brand-primary-hover: #345a4d;
  --color-brand-soft:          #e8efeb;

  /* color/accent + semantic */
  --color-accent-warm:      #c97a4f;
  --color-semantic-success: #3f8a5c;
  --color-semantic-warning: #c4892d;
  --color-semantic-danger:  #b5443b;
  --color-semantic-info:    #3d6e94;

  /* color/border */
  --color-border-subtle: #e5e0d7;
  --color-border-strong: #c8c0b3;

  /* font — Noto Sans KR throughout, including the "mono" role, which in this
     design is a voice (quoted speech) rather than a monospaced face. */
  /* "Noto Sans KR Fallback" carries Noto's own vertical metrics (see
     fonts.css), so if the real face has not arrived the text still occupies
     exactly the same space and nothing shifts. */
  --font-family: "Noto Sans KR", "Noto Sans KR Fallback", -apple-system,
                 BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --font-display-size: 3rem;      /* 48 */
  --font-display-weight: 700;
  --font-display-leading: 1.15;

  --font-h1-size: 2.25rem;        /* 36 */
  --font-h1-weight: 700;
  --font-h1-leading: 1.2;

  --font-h2-size: 1.75rem;        /* 28 */
  --font-h2-weight: 500;
  --font-h2-leading: 1.25;

  --font-h3-size: 1.375rem;       /* 22 */
  --font-h3-weight: 500;
  --font-h3-leading: 1.3;

  --font-lead-size: 1.125rem;     /* 18 */
  --font-lead-leading: 1.6;

  --font-body-lg-size: 1rem;      /* 16 */
  --font-body-lg-leading: 1.7;

  --font-body-md-size: 0.875rem;  /* 14 */
  --font-body-md-leading: 1.6;

  --font-caption-size: 0.75rem;   /* 12 */
  --font-caption-weight: 500;
  --font-caption-leading: 1.5;

  /* Figma reports letterSpacing: -1 on every style. Read as -1%, which is
     normal tightening for Korean type; -1px would be far too much at 12px. */
  --font-tracking: -0.01em;

  /* space */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */

  /* radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* ===== aliases used by the stylesheets ================================= */
  --bg:           var(--color-surface-canvas);
  --bg-alt:       var(--color-surface-sunken);
  --surface:      var(--color-surface-raised);
  --surface-sunk: var(--color-surface-sunken);

  --ink:   var(--color-text-primary);
  --ink-2: var(--color-text-secondary);
  --muted: var(--color-text-muted);

  --line:        var(--color-border-subtle);
  --line-strong: var(--color-border-strong);

  --accent:       var(--color-brand-primary);
  --accent-hover: var(--color-brand-primary-hover);
  --accent-ink:   var(--color-text-inverse);
  --accent-soft:  var(--color-brand-soft);
  --accent-line:  var(--color-border-subtle);

  --dark:       var(--color-surface-inverse);
  --dark-ink:   var(--color-text-inverse);
  --dark-muted: var(--color-text-muted);

  --focus: var(--color-brand-primary);

  --font-sans: var(--font-family);

  /* type scale, mapped onto the Figma roles */
  --step--1: var(--font-caption-size);   /* 12 */
  --step-0:  var(--font-body-md-size);   /* 14 */
  --step-1:  var(--font-body-lg-size);   /* 16 */
  --step-2:  var(--font-lead-size);      /* 18 */
  --step-3:  var(--font-h3-size);        /* 22 */
  --step-4:  var(--font-h2-size);        /* 28 */
  --step-5:  var(--font-h1-size);        /* 36 */
  --step-6:  var(--font-display-size);   /* 48 */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   700;

  --leading-tight: var(--font-h2-leading);
  --leading-body:  var(--font-body-lg-leading);

  /* not in Figma — kept small and neutral so they read as depth, not colour */
  --radius:      var(--radius-md);
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(31, 27, 22, .04);
  --shadow:    0 1px 3px rgba(31, 27, 22, .05), 0 8px 24px -18px rgba(31, 27, 22, .30);

  --section-y: clamp(3.5rem, 8vw, var(--space-8));
  --container: 1160px;
  --container-narrow: 760px;
  --header-h: 74px;
}