/**
 * tokens.css — Organic / Natural design token system
 * Wabi-sabi philosophy: warmth, imperfection, earth tones, soft shapes
 * Colors, spacing, typography, shadows, transitions, z-index
 */

:root {
    /* ── Color: Background & Surface ── */
    --color-background:            #FDFCF8;   /* Rice Paper */
    --color-surface:               #FDFCF8;
    --color-surface-container:     #F0EBE5;   /* Stone */
    --color-surface-warm:          #FEFEFA;   /* Card white-warm */
    --color-surface-sand:          rgba(230, 220, 205, 0.3); /* Sand tint */
    --color-surface-stone:         rgba(240, 235, 229, 0.3); /* Stone tint */

    /* ── Color: Foreground & Text ── */
    --color-on-surface:            #2C2C24;   /* Deep Loam */
    --color-on-surface-variant:    #5C5C50;   /* Warmer mid-tone for AA */
    --color-outline:               #DED8CF;   /* Raw Timber */
    --color-outline-variant:       #EDE7DE;   /* Lighter border */

    /* ── Color: Primary (Moss Green) ── */
    --color-primary:               #5D7052;   /* Moss Green */
    --color-primary-text:          #3D5534;   /* Darkened moss for AA text */
    --color-primary-btn:           #5D7052;   /* button bg */
    --color-on-primary:            #F3F4F1;   /* Pale Mist */
    --color-primary-container:     #DAE8D6;   /* Light moss surface */
    --color-on-primary-container:  #1A3318;   /* Deep forest on light */
    --color-primary-hover:         #4A5C41;   /* Darker moss hover */

    /* ── Color: Secondary (Terracotta / Clay) ── */
    --color-secondary:             #C18C5D;   /* Terracotta */
    --color-secondary-text:        #7A4D28;   /* Dark clay for AA text */
    --color-secondary-container:   #F2DCC8;   /* Pale terracotta */
    --color-on-secondary-container:#4A2A10;   /* Deep clay */
    --color-secondary-hover:       #A8773F;   /* Deeper terracotta hover */

    /* ── Color: Accent (Sand / Beige) ── */
    --color-accent:                #E6DCCD;   /* Sand */
    --color-accent-foreground:     #4A4A40;   /* Bark */
    --color-accent-container:      #F5F0E8;   /* Very pale sand */

    /* ── Color: Muted ── */
    --color-muted:                 #F0EBE5;   /* Stone */
    --color-muted-foreground:      #6B6B5F;   /* Dried Grass — darkened for AA on stone */

    /* ── Color: Border ── */
    --color-border:                #DED8CF;   /* Raw Timber */
    --color-border-control:        #887D6D;   /* Warm Stone — form controls (3.4:1 on muted, 3.9:1 on white) */

    /* ── Color: Error / Destructive ── */
    --color-error:                 #A85448;   /* Burnt Sienna */
    --color-error-container:       #F4DCDA;
    --color-on-error-container:    #3D1210;

    /* ── Color: Success ── */
    --color-success:               #4A6741;
    --color-success-container:     #DAE8D6;

    /* ── Spacing (4px base, multiplied) ── */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-7:  1.75rem;   /* 28px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */

    /* ── Typography: Font Family ── */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:    'Nunito', system-ui, -apple-system, sans-serif;
    --font-mono:    'Courier New', Courier, monospace;

    /* ── Typography: Scale (1.25 ratio) ── */
    /* Base: 1rem (16px) */
    --text-xs:      1rem;       /* 16px — label small (a11y min) */
    --text-sm:      1rem;       /* 16px — label (a11y min) */
    --text-base:    1rem;       /* 16px  — body */
    --text-lg:      1.125rem;   /* 18px */
    --text-xl:      1.25rem;    /* 20px */
    --text-2xl:     1.5rem;     /* 24px */
    --text-3xl:     1.875rem;   /* 30px */
    --text-4xl:     2.25rem;    /* 36px */
    --text-5xl:     2.8125rem;  /* 45px */
    --text-6xl:     3.5rem;     /* 56px */
    --text-7xl:     4.375rem;   /* 70px */

    /* Semantic aliases for clarity */
    --text-display-large:   var(--text-7xl);
    --text-display-medium:  var(--text-6xl);
    --text-display-small:   var(--text-5xl);
    --text-headline-large:  var(--text-4xl);
    --text-headline-medium: var(--text-3xl);
    --text-headline-small:  var(--text-2xl);
    --text-title-large:     var(--text-xl);
    --text-title-medium:    var(--text-lg);
    --text-body-large:      var(--text-base);
    --text-body-medium:     var(--text-base);
    --text-body-small:      1rem;           /* 16px — a11y min */
    --text-label-large:     var(--text-base);
    --text-label-medium:    var(--text-sm);
    --text-label-small:     var(--text-xs);

    /* ── Typography: Weight ── */
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semibold:600;
    --weight-bold:    700;

    /* Fraunces display weights (only 600-800 loaded) */
    --weight-display-normal: 600;
    --weight-display-bold:   800;

    /* ── Typography: Line Height ── */
    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.5;
    --leading-relaxed: 1.7;
    --leading-loose:   1.9;

    /* ── Typography: Letter Spacing ── */
    --tracking-tightest: -0.04em;
    --tracking-tight:    -0.02em;
    --tracking-normal:    0;
    --tracking-wide:      0.02em;
    --tracking-wider:     0.05em;
    --tracking-widest:    0.12em;

    /* ── Border Radius (Organic feel) ── */
    --radius-xs:    0.25rem;    /*  4px */
    --radius-sm:    0.5rem;     /*  8px */
    --radius-md:    0.75rem;    /* 12px */
    --radius-lg:    1rem;       /* 16px — 2xl equivalent */
    --radius-xl:    1.25rem;    /* 20px */
    --radius-2xl:   1.5rem;     /* 24px — 3xl equivalent */
    --radius-3xl:   2rem;       /* 32px */
    --radius-4xl:   2.5rem;     /* 40px */
    --radius-full:  9999px;     /* pill */

    /* Organic blob radii (wabi-sabi asymmetry) */
    --radius-organic-1: 60% 40% 30% 70% / 60% 30% 70% 40%;
    --radius-organic-2: 40% 60% 70% 30% / 40% 70% 30% 60%;
    --radius-organic-3: 50% 50% 40% 60% / 60% 40% 60% 40%;
    --radius-organic-4: 30% 70% 60% 40% / 50% 60% 40% 50%;
    --radius-organic-5: 70% 30% 40% 60% / 40% 50% 60% 50%;
    --radius-organic-6: 45% 55% 65% 35% / 55% 45% 55% 45%;

    /* ── Shadows (organic-tinted, never pure black) ── */
    --shadow-none:      none;
    --shadow-xs:        0 1px 3px rgba(93, 112, 82, 0.08);
    --shadow-sm:        0 2px 8px -1px rgba(93, 112, 82, 0.12);
    --shadow-md:        0 4px 16px -2px rgba(93, 112, 82, 0.14);
    --shadow-soft:      0 4px 20px -2px rgba(93, 112, 82, 0.15);
    --shadow-lg:        0 8px 32px -4px rgba(93, 112, 82, 0.16);
    --shadow-float:     0 10px 40px -10px rgba(193, 140, 93, 0.2);
    --shadow-xl:        0 20px 60px -12px rgba(44, 44, 36, 0.18);
    --shadow-moss-sm:   0 2px 8px rgba(93, 112, 82, 0.2);
    --shadow-moss-md:   0 6px 24px rgba(93, 112, 82, 0.22);
    --shadow-clay-sm:   0 2px 8px rgba(193, 140, 93, 0.18);
    --shadow-clay-md:   0 6px 24px rgba(193, 140, 93, 0.2);

    /* ── Transitions (natural, organic easing) ── */
    --ease-natural:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in:            cubic-bezier(0.4, 0, 1, 1);
    --ease-out:           cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:        cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast:      150ms;
    --duration-base:      300ms;
    --duration-slow:      450ms;
    --duration-slower:    600ms;
    --transition-fast:    150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-base:    300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow:    450ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-spring:  400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-Index ── */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:   10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
    --z-grain:    9999;
    --z-top:      1000;

    /* ── Layout ── */
    --container-max:    1280px;
    --container-narrow:  720px;
    --container-wide:   1440px;
    --section-padding:  var(--space-20);
    --nav-height:       4.5rem;
}