/* ============================================
   SEU FINÂNCIO — Design Tokens
   Caderneta Design · Warm notebook-inspired finance interface
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    /* ===== COLORS ===== */

    /* Base surfaces — paper, ink, notebook cream */
    --color-bg:           #FAF6F0;  /* page cream */
    --color-surface:      #FFFFFF;  /* card paper */
    --color-surface-alt:  #F5F0E8;  /* band / section tint */
    --color-border:       #E0D8CC;  /* notebook line */
    --color-border-light: #C8BFB0;  /* emphasized line */

    /* Accent — forest green "ink" */
    --color-accent:        #2D5F3E;
    --color-accent-bright: #3A7A4F;
    --color-accent-muted:  rgba(45, 95, 62, 0.10);

    /* Text — warm ink hierarchy */
    --color-text:       #2A2A2A;
    --color-text-muted: #6B6B6B;
    --color-text-dim:   #A0A0A0;

    /* Semantic */
    --color-success:       #2D5F3E;       /* same as accent — income */
    --color-danger:        #C0392B;       /* expense red */
    --color-danger-muted:  rgba(192, 57, 43, 0.10);
    --color-warning:       #D4A843;       /* goal-near / caution */
    --color-star:          #E8B931;       /* testimonial stars */

    /* Dark panel (used on family section) */
    --color-dark-section:  #2D5F3E;
    --color-footer-bg:     #2A2A2A;

    /* ===== FOREGROUND / BACKGROUND ALIASES ===== */
    --fg1: var(--color-text);
    --fg2: var(--color-text-muted);
    --fg3: var(--color-text-dim);
    --bg1: var(--color-bg);
    --bg2: var(--color-surface);
    --bg3: var(--color-surface-alt);

    /* ===== TYPOGRAPHY ===== */
    --font-display: 'Fraunces', 'Georgia', serif;            /* headings, logo, numbers in hero */
    --font-body:    'DM Sans', 'Inter', system-ui, sans-serif; /* UI copy, labels */
    --font-mono:    'IBM Plex Mono', 'JetBrains Mono', monospace; /* money, eyebrows, metadata */

    /* Font sizes — UI is very compact; html base is 14px */
    --fs-mono-xs: 0.625rem;   /* 8.75px  — labels, eyebrows */
    --fs-xs:      0.6875rem;  /* 9.625px — captions, hints */
    --fs-sm:      0.75rem;    /* 10.5px  — meta, nav */
    --fs-md:      0.8125rem;  /* 11.375px— body copy */
    --fs-lg:      0.875rem;   /* 12.25px — emphasized body */
    --fs-xl:      1rem;       /* 14px    — section intros */
    --fs-2xl:     1.125rem;   /* 15.75px — values */
    --fs-3xl:     1.25rem;    /* 17.5px  — logo / page titles */
    --fs-4xl:     1.5rem;     /* 21px    — big numbers, page-title */
    --fs-display: 3.5rem;     /* 49px    — hero headline */

    /* Weights */
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold:600;
    --fw-bold:    700;

    /* Tracking — 0.02em is the global default */
    --tracking-tight:  0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.05em;   /* mono eyebrows */
    --tracking-wider:  0.1em;    /* hero eyebrow, landing section eyebrow */

    /* Line heights */
    --lh-tight:  1.2;
    --lh-snug:   1.4;
    --lh-body:   1.6;
    --lh-relaxed:1.7;

    /* ===== SPACING ===== */
    --space-xs:   0.25rem;
    --space-sm:   0.5rem;
    --space-md:   1rem;
    --space-lg:   1.5rem;
    --space-xl:   2rem;
    --space-2xl:  3rem;
    --space-3xl:  4rem;

    /* ===== RADII ===== */
    --radius-sm: 4px;    /* tiny pills */
    --radius-md: 6px;    /* default control */
    --radius-lg: 8px;    /* cards, modals */
    --radius-pill: 20px;

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 1px 3px  rgba(139, 126, 116, 0.08);
    --shadow-md: 0 4px 12px rgba(139, 126, 116, 0.12);
    --shadow-lg: 0 8px 24px rgba(139, 126, 116, 0.16);
    --shadow-accent: 0 4px 16px rgba(45, 95, 62, 0.25);

    /* ===== LAYOUT ===== */
    --sidebar-width: 240px;
    --container-max: 1200px;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

/* ============================================
   SEMANTIC ELEMENT STYLES
   Use directly on <h1>, <h2>, etc, or as classnames.
   ============================================ */

html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body, .type-body {
    font-family: var(--font-body);
    color: var(--fg1);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    letter-spacing: var(--tracking-tight);
}

h1, .type-h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: clamp(2.25rem, 5vw, var(--fs-display));
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--fg1);
}

h2, .type-h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--fg1);
}

h3, .type-h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-3xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--fg1);
}

/* "Page title" — what's used above tables / panels in the app chrome */
.type-page-title {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-4xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--fg1);
}

/* Small caps-style eyebrows for section intros */
.type-eyebrow {
    font-family: var(--font-mono);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Tiny UI eyebrow — used inside cards / over inputs */
.type-label {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-mono-xs);
    letter-spacing: var(--tracking-tight);
    color: var(--fg2);
}

.type-caption {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    color: var(--fg3);
}

/* Body variants */
p, .type-p {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--fg1);
}

.type-lede {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--fg2);
    line-height: var(--lh-relaxed);
}

/* Money — always mono */
.type-money, .money {
    font-family: var(--font-mono);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.type-money.income  { color: var(--color-success); }
.type-money.expense { color: var(--color-danger); }

code, kbd, .type-mono {
    font-family: var(--font-mono);
    font-size: 0.92em;
    letter-spacing: var(--tracking-tight);
}