/* ============================================================
   Notaku Design System — colors_and_type.css
   The full token surface for the (revamped) Notaku brand.

   Direction: Notion × Arc × Linear. Warm cream paper background,
   confident display sans, deep teal-green accent (signals money +
   trust + accuracy — and almost no Indonesian SaaS uses it).

   Light is the default; dark mode is offered as an alternate (not
   the default like the current production app).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Brand color ----------
     Notaku Teal — a deep, slightly cool teal-green. Reads as money,
     trust and accuracy. The "soft" shade is what we use for tinted
     surfaces (selected states, accent badges, hover halos). */
  --green-50:  #EAF1EC;   /* lightest tint, accent surface */
  --green-100: #D6E3D9;   /* hover halo on light surfaces */
  --green-200: #A8C5B0;
  --green-300: #6BA181;
  --green-400: #2D7C5C;
  --green-500: #0F5740;   /* PRIMARY brand color */
  --green-600: #0B4332;
  --green-700: #083325;
  --green-800: #052119;
  --green-900: #021310;

  /* ---------- Paper / cream neutrals ----------
     Warm off-whites that feel like a well-typeset document, not a
     screen. Cream is the page; Ivory is elevated surfaces (cards,
     modal sheets); Cloud is a recessed surface (inputs, code, mono). */
  --paper-cream:    #FBFBF4;   /* page background — unified Notaku cream (2026-06-17) */
  --paper-ivory:    #FBFBF4;   /* card/sheet surface — same as page; elevation comes from border + shadow, not paper shade */
  --paper-cloud:    #F2EFE2;   /* recessed surface (input, well) — slightly warmer than page to keep wells distinguishable */
  --paper-line:     #DDD3B9;   /* visible hairline on cream */
  --paper-shadow:   rgba(43, 36, 18, 0.06);   /* warm shadow */

  /* ---------- Ink (text neutrals) ----------
     Slight teal cast so neutrals harmonize with the green accent.
     Avoid pure #000 — it would feel cold against cream. */
  --ink-1: #142420;   /* heading / max contrast */
  --ink-2: #2A3835;   /* body */
  --ink-3: #4B5754;   /* secondary body */
  --ink-4: #7A847F;   /* muted captions, placeholders */
  --ink-5: #A5ACA7;   /* disabled, dividers as text */

  /* ---------- Borders ----------
     Soft warm hairlines on cream. Two strengths: subtle (default
     card border) and strong (focus, dividers, important framing). */
  --border:        rgba(20, 36, 32, 0.10);
  --border-strong: rgba(20, 36, 32, 0.18);
  --border-focus:  var(--green-500);

  /* ---------- Semantic ----------
     Money/credit/income uses brand green (intentional — accuracy is
     positive). Warning is a warm amber that lives well next to cream.
     Danger is a deep brick, not a bright web-red. */
  --positive:        #0F5740;
  --positive-soft:   #DCEADE;
  --positive-ink:    #08382A;
  --warning:         #A86314;
  --warning-soft:    #F3E4C8;
  --warning-ink:     #5F3604;
  --danger:          #9C3939;
  --danger-soft:     #F1D9D6;
  --danger-ink:      #5A1A1A;
  --info:            #2E5A8E;
  --info-soft:       #DDE5EF;

  /* ---------- Surfaces (semantic) ----------
     Map paper neutrals onto roles so components don't reference
     the raw cream scale. */
  --bg:           var(--paper-cream);
  --surface:      var(--paper-ivory);
  --surface-alt:  var(--paper-cloud);
  --surface-elev: #FFFFFF;
  --fg:           var(--ink-1);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --muted:        var(--ink-4);
  --accent:       var(--green-500);
  --accent-hover: var(--green-600);
  --accent-soft:  var(--green-50);
  --accent-line:  rgba(15, 87, 64, 0.20);

  /* ---------- Radii ----------
     Bold rounded corners on cards (16–18px). Buttons sit a notch
     smaller; pills go fully round. */
  --r-xs: 6px;     /* chips, tags */
  --r-sm: 10px;    /* form inputs, small buttons */
  --r-md: 14px;    /* default button, small card */
  --r-lg: 18px;    /* card, sheet, panel */
  --r-xl: 24px;    /* hero card, large modal */
  --r-pill: 999px;

  /* ---------- Shadow ----------
     Warm, low-spread shadows. Never the typical web-blue 0 4 12 rgba(0,0,0,.1). */
  --shadow-1: 0 1px 0 rgba(20, 36, 32, 0.04), 0 1px 2px rgba(20, 36, 32, 0.04);
  --shadow-2: 0 2px 4px rgba(20, 36, 32, 0.05), 0 6px 14px -6px rgba(20, 36, 32, 0.10);
  --shadow-3: 0 6px 14px -6px rgba(20, 36, 32, 0.12), 0 18px 32px -12px rgba(20, 36, 32, 0.14);
  --shadow-pop: 0 12px 40px -12px rgba(15, 87, 64, 0.22);  /* used on the active mobile nav pill */

  /* ---------- Spacing scale ----------
     Generous. 4px base. Most layouts breathe at 24/32/48. */
  --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: 72px;
  --space-11: 96px;

  /* ---------- Type families ----------
     Display — Instrument Sans. A grotesk with quiet personality:
       wider letterforms at heavy weights, slightly mechanical
       terminals. Confident, not cold. The italic adds character to
       editorial moments (testimonials, callouts).
     Body — Inter. Already shipping in production; great for dense
       UI and tabular numerals.
     Editorial — Instrument Serif. For occasional editorial flourish
       (hero quote, "made in Indonesia" footer, etc). Don't use for
       UI text — reserved for typographic moments.
     Mono — JetBrains Mono for code/numeric receipt lines. */
  --font-display: "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif:   "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (semantic) ----------
     Sizes chosen for "well-typeset document" feel. Headings are
     a little larger than the SaaS norm; body lifts to 16px. */
  --fs-display-1: clamp(56px, 8vw, 96px);
  --fs-display-2: clamp(40px, 5.5vw, 64px);
  --fs-h1:        clamp(32px, 4vw, 44px);
  --fs-h2:        clamp(24px, 3vw, 32px);
  --fs-h3:        20px;
  --fs-h4:        17px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-caption:   13px;
  --fs-micro:     11px;

  /* ---------- Type rhythm ---------- */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-loose:   1.65;
  --tracking-tight: -0.03em;   /* display headlines */
  --tracking-snug:  -0.018em;  /* h1-h3 */
  --tracking-body:  -0.006em;
  --tracking-caps:  0.08em;    /* eyebrow / overline */

  /* ---------- Motion ----------
     Easings + durations. Default is a soft ease-out. "Spring" is for
     micro-interactions (button press, toggle); "settle" for sheets. */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1.00);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1.00);
  --ease-settle:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ---------- Dark mode (alternate) ----------
   Less of an "inversion", more of a deep-forest paper. Background
   warm-black with a green tint, surfaces sit on top of it.
   Accent gets a touch lighter so it still pops at AA contrast. */
:root[data-theme="dark"] {
  --paper-cream:    #131815;
  --paper-ivory:    #1B221E;
  --paper-cloud:    #232B26;
  --paper-line:     #2C342E;
  --paper-shadow:   rgba(0, 0, 0, 0.45);

  --ink-1: #EDE6D2;
  --ink-2: #C9C6B7;
  --ink-3: #9CA29A;
  --ink-4: #6D766F;
  --ink-5: #4A5048;

  --border:        rgba(237, 230, 210, 0.10);
  --border-strong: rgba(237, 230, 210, 0.20);

  --accent:        #4FB892;  /* lifted for contrast on dark */
  --accent-hover:  #6BC9A6;
  --accent-soft:   rgba(79, 184, 146, 0.14);
  --accent-line:   rgba(79, 184, 146, 0.30);
  --positive:      #4FB892;
  --positive-soft: rgba(79, 184, 146, 0.14);
  --warning:       #D8A44A;
  --warning-soft:  rgba(216, 164, 74, 0.14);
  --danger:        #D76262;
  --danger-soft:   rgba(215, 98, 98, 0.14);
  /* *-ink colors need lifting in dark mode too — without these overrides
     they stay at their light-mode dark values (#08382A etc.) and become
     invisible on the dark *-soft backgrounds. Pinned to the same lifted
     hues used by the matching base color so chip text reads cleanly. */
  --positive-ink:  #6BC9A6;
  --warning-ink:   #E5BC73;
  --danger-ink:    #E58A8A;

  --surface-elev: #242C26;
}

/* ============================================================
   Semantic element styles — components reach for these mixins.
   Pages can include this file and get sensible base styling for
   free; full UI kits compose on top.
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink-1);
  margin: 0 0 var(--space-4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

.display-1 { font-family: var(--font-display); font-size: var(--fs-display-1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 600; }
.display-2 { font-family: var(--font-display); font-size: var(--fs-display-2); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 600; }
.editorial { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-3);
}
.mono, code, kbd, pre, .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

p { margin: 0 0 var(--space-4); color: var(--ink-2); text-wrap: pretty; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

::selection { background: var(--green-100); color: var(--ink-1); }
:root[data-theme="dark"] ::selection { background: rgba(79, 184, 146, 0.35); color: var(--ink-1); }

/* Focus ring — green double-ring (outline + soft halo). Visible on
   any interactive element when keyboard-focused. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}