/* Tektome Design System — Colors & Typography */
/* Source of truth: BrandGuidelines.pdf (April 2026) */

/* ============================================================
   FONTS
   Primary:         Noto Sans          → self-hosted, fonts/ (variable)
   Display / Hero:  Noto Sans Display  → self-hosted, fonts/ (variable)
   Japanese:        Noto Sans JP       → Google Fonts (no local file yet)
   Mono / Code:     Noto Sans Mono     → Google Fonts (no local file yet)
   Legal JP:        Meiryo             → system fallback
   ============================================================ */

/* --- Google Fonts (Noto Sans + JP + Mono) --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&family=Noto+Sans+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- PRIMARY PALETTE ---------- */
  --color-arch-purple:  #5156DB;   /* Accent — the signature color */
  --color-data-black:   #101010;   /* Neutral dark */
  --color-draft-white:  #FFFFFF;   /* Neutral light */

  /* ---------- SUPPORTING PALETTE ---------- */
  --color-taro:         #AAA6F0;   /* Lavender-blue (Supporting A) */
  --color-lavender:     #CECDF5;   /* Pale lavender (Supporting B) */
  --color-dark-gray:    #2A2930;   /* Supporting Dark */
  --color-light-gray:   #F4F4F4;   /* Supporting Light — dominant bg */

  /* ---------- SECTION ALTERNATION (light blue) ----------
     Light-mode-only section rhythm; never a dark fill. */
  --color-sky-50:   #F1F5FE;   /* faintest — large washes */
  --color-sky-100:  #E8EFFC;   /* default section-alt fill */
  --color-sky-200:  #D6E2FA;   /* sky border / hairline on sky */
  --color-sky-300:  #BCCCF4;   /* deeper accent on sky */
  --bg-section-alt: #E8EFFC;

  /* ---------- EXPANDED PURPLE (tints & shades) ---------- */
  --purple-950: #15063C;
  --purple-900: #1D0F5F;
  --purple-800: #3934BB;
  --purple-700: #3D3EC9;
  --purple-600: #3334EB;   /* pure digital purple */
  --purple-500: #5156DB;   /* = Arch Purple */
  --purple-400: #6F71E0;
  --purple-300: #8A8DE8;
  --purple-200: #AAA6F0;   /* = Taro */
  --purple-100: #CECDF5;   /* = Lavender */
  --purple-50:  #ECECFC;

  /* ---------- EXPANDED DARK ---------- */
  --dark-900: #101010;     /* = Data Black */
  --dark-800: #1A1A1A;
  --dark-700: #252525;
  --dark-600: #2A2930;     /* = Dark Gray */
  --dark-500: #3A3A45;
  --dark-400: #555566;
  --dark-300: #7A7A85;

  /* ---------- EXPANDED LIGHT / NEUTRALS ---------- */
  --gray-50:  #FFFFFF;
  --gray-100: #F8F8F8;
  --gray-200: #F4F4F4;    /* = Light Gray */
  --gray-300: #EAEAEA;
  --gray-400: #D4D4D4;
  --gray-500: #A8A8A8;
  --gray-600: #7A7A7A;

  /* ---------- SEMANTIC / DATA VIZ ---------- */
  --color-success: #27C395;   /* Green */
  --color-teal:    #07AAC7;   /* Teal */
  --color-warning: #E6A058;   /* Orange */
  --color-accent-purple: #A261CA; /* Data-viz purple */
  --color-pink:    #E66292;
  --color-error:   #C62828;   /* inferred from UI sample */
  --color-info:    #5156DB;

  /* Semantic UI states from guide */
  --state-success-bg:   #D8F2E8;
  --state-success-fg:   #1D7A57;
  --state-warning-bg:   #FBE8CF;
  --state-warning-fg:   #B06B14;
  --state-error-bg:     #F5D5D5;
  --state-error-fg:     #A02020;
  --state-enabled-bg:   #E1E0FA;
  --state-enabled-fg:   #3934BB;
  --state-disabled-bg:  #ECECEC;
  --state-disabled-fg:  #8B8B8B;

  /* ---------- GRADIENTS ---------- */
  --gradient-purple-1: linear-gradient(90deg, #1D0F5F 0%, #3F2F7A 100%);
  --gradient-purple-2: linear-gradient(90deg, #3D3EC9 0%, #AAA6F0 100%);
  --gradient-purple-3: linear-gradient(90deg, #AAA6F0 0%, #CECDF5 100%);
  --gradient-dark:     linear-gradient(90deg, #101010 0%, #555555 100%);
  --gradient-light:    linear-gradient(90deg, #FFFFFF 0%, #EAEAEA 100%);
  --gradient-hero:     linear-gradient(115deg, #5156DB 0%, #8A8DE8 50%, #AAA6F0 100%);

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg-page:       var(--gray-200);
  --bg-surface:    #FFFFFF;
  --bg-surface-2:  var(--gray-100);
  --bg-inverse:    var(--color-data-black);
  --bg-accent:     var(--color-arch-purple);

  --fg-primary:    var(--color-data-black);
  --fg-secondary:  var(--dark-500);
  --fg-tertiary:   var(--gray-600);
  --fg-inverse:    var(--color-draft-white);
  --fg-accent:     var(--color-arch-purple);
  --fg-on-accent:  var(--color-draft-white);

  --border-subtle: var(--gray-300);
  --border-default: var(--gray-400);
  --border-strong: var(--dark-600);
  --border-accent: var(--color-arch-purple);

  /* ---------- TYPE FAMILIES ----------
     JP site: Noto Sans JP leads sans + display so Japanese copy renders
     in-brand; Noto Sans / Display kept as Latin fallbacks. Mono labels
     (eyebrows / specs) stay Noto Sans Mono — a core brand motif. */
  --font-sans:    'Noto Sans JP', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Noto Sans JP', 'Noto Sans Display', 'Noto Sans', sans-serif;
  --font-mono:    'Noto Sans Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-jp:      'Noto Sans JP', 'Meiryo', 'MS PGothic', sans-serif;
  --font-legal:   'Meiryo', 'Noto Sans JP', sans-serif;

  /* ---------- TYPE WEIGHTS ---------- */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ---------- SPACING (4-based) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- RADII ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (soft, flat-ish) ---------- */
  --shadow-xs:    0 1px 2px rgba(16, 16, 16, 0.04);
  --shadow-sm:    0 1px 3px rgba(16, 16, 16, 0.06), 0 1px 2px rgba(16, 16, 16, 0.04);
  --shadow-md:    0 4px 12px rgba(16, 16, 16, 0.06), 0 2px 4px rgba(16, 16, 16, 0.04);
  --shadow-lg:    0 12px 32px rgba(16, 16, 16, 0.08), 0 4px 8px rgba(16, 16, 16, 0.04);
  --shadow-focus: 0 0 0 3px rgba(81, 86, 219, 0.25);

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
}

/* ============================================================
   BASE TYPE
   Noto Sans Light (300) for display — the guide specimen reads
   "Display: Light 310, leading 120%, spacing 2%".
   Body uses Regular 400; UI labels use Mono uppercase tracked.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-page);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Display (hero) --- */
.t-display, .t-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(56px, 8vw, 112px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
}

/* --- Headline --- */
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h3, .t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 18px;
  line-height: 1.3;
}

/* --- Body --- */
.t-body-lg, p.lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-primary);
}
p, .t-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-primary);
}
.t-body-sm, small {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-secondary);
}

/* --- Eyebrow label (UPPERCASE mono — a core brand motif) --- */
.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
}

/* --- Spec-line (the em-dash metadata chips shown next to headlines) --- */
.t-spec-line {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

/* --- UI label --- */
.t-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

/* --- Code / tabular --- */
code, .t-mono, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--fg-primary);
}

/* --- Links --- */
a {
  color: var(--color-arch-purple);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--purple-700); }

/* ============================================================
   HELPERS
   ============================================================ */
.surface         { background: var(--bg-surface); border-radius: var(--radius-lg); }
.surface-2       { background: var(--bg-surface-2); border-radius: var(--radius-lg); }
.surface-inverse { background: var(--bg-inverse); color: var(--fg-inverse); }
.surface-accent  { background: var(--bg-accent);  color: var(--fg-on-accent); }
.surface-bordered{ border: 1px solid var(--border-subtle); }