/* ════════════════════════════════════════════════════════════════════
   twc_core.css - TheWorkCompany design tokens (Constitution §13)
   Single source of truth for visual identity across skill.re corp.
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Color: Base (cream-paper, not pure white) ── */
    --twc-bg:              #FAF7F0;
    --twc-surface:         #FFFFFF;
    --twc-surface-hover:   #F5F0E2;
    --twc-border:          #E8E2D1;
    --twc-divider:         #F0EBDE;

    /* ── Color: Text ── */
    --twc-text:            #0B0B0B;
    --twc-text-secondary:  #3A3A36;
    --twc-text-muted:      #6A665C;
    --twc-text-inverse:    #FFFFFF;

    /* ── Color: Accent / Pastels ── */
    --twc-accent:          #0B0B0B;   /* primary CTA = pure ink, lime as overlay */
    --twc-accent-hover:    #000000;
    --twc-accent-light:    #F0EBDE;

    --twc-vibe:            #C9F75A;   /* signature lime (skill.re) */
    --twc-vibe-deep:       #5B7300;
    --twc-vibe-soft:       #E8F8B8;

    --twc-success:         #00B07C;
    --twc-success-light:   #CFF2E5;
    --twc-warning:         #FFD56B;
    --twc-warning-light:   #FFEDC7;
    --twc-error:           #FF6B6B;
    --twc-error-light:     #FFE0E0;
    --twc-info:            #7AB7FF;
    --twc-info-light:      #DCEAFB;
    --twc-highlight:       #7C5CE6;
    --twc-highlight-light: #E5DCFB;

    /* ── Typography ── */
    --twc-font: Figtree, "Segoe UI", sans-serif;
    --twc-font-display: Figtree, "Segoe UI", sans-serif;
    --twc-font-editorial: Figtree, "Segoe UI", sans-serif;
    --twc-font-mono: Figtree, "Segoe UI", sans-serif;

    --twc-text-xs:    var(--fs-12);
    --twc-text-sm:    var(--fs-14);
    --twc-text-base:  var(--fs-16);
    --twc-text-lg:    var(--fs-18);
    --twc-text-xl:    var(--fs-24);
    --twc-text-2xl:   var(--fs-32);
    --twc-text-3xl:   var(--fs-48);
    --twc-line-height:       1.6;
    --twc-line-height-tight: 1.2;

    /* ── Spacing ── */
    --twc-space-1:  0.25rem;
    --twc-space-2:  0.5rem;
    --twc-space-3:  0.75rem;
    --twc-space-4:  1rem;
    --twc-space-6:  1.5rem;
    --twc-space-8:  2rem;
    --twc-space-12: 3rem;
    --twc-space-16: 4rem;
    --twc-space-24: 6rem;

    /* ── Layout ── */
    --twc-content-width:  1200px;
    --twc-narrow-width:   720px;
    --twc-header-height:  64px;
    --twc-radius:         12px;
    --twc-radius-sm:      8px;
    --twc-radius-lg:      20px;
    --twc-radius-full:    9999px;

    /* ── Motion ── */
    --twc-transition:      150ms cubic-bezier(.22,1,.36,1);
    --twc-transition-slow: 300ms cubic-bezier(.22,1,.36,1);

    /* ── Shadows ── */
    --twc-shadow-sm:  0 1px 2px rgba(0,0,0,0.04);
    --twc-shadow:     0 4px 14px -4px rgba(0,0,0,0.08);
    --twc-shadow-lg:  0 18px 40px -14px rgba(0,0,0,0.16);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root{--fs-12:.75rem;--fs-14:.875rem;--fs-16:1rem;--fs-18:1.125rem;--fs-24:1.5rem;--fs-32:2rem;--fs-48:3rem}
@media(max-width:640px){:root{--fs-48:2rem;--fs-32:1.75rem}}
html { scroll-behavior: smooth; font-size: 16px; }
body{font-weight:500}
b,strong,th{font-weight:700}
code,pre,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

body {
    font-family: var(--twc-font);
    background: var(--twc-bg);
    color: var(--twc-text);
    font-size: var(--twc-text-base);
    line-height: var(--twc-line-height);
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ── Layout primitives ───────────────────────────────────── */
.twc-container {
    width: 100%;
    max-width: var(--twc-content-width);
    margin: 0 auto;
    padding: 0 var(--twc-space-4);
}
@media (min-width: 768px) {
    .twc-container { padding: 0 var(--twc-space-8); }
}
.twc-narrow {
    max-width: var(--twc-narrow-width);
    margin: 0 auto;
    padding: 0 var(--twc-space-4);
}

/* ── Buttons ─────────────────────────────────────────────── */
.twc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--twc-space-2);
    padding: 0.7rem 1.2rem;
    font-weight: 700;
    font-size: var(--twc-text-sm);
    border-radius: var(--twc-radius-full);
    transition: transform var(--twc-transition), box-shadow var(--twc-transition), background var(--twc-transition);
    line-height: 1;
    border: 1px solid transparent;
    min-height: 44px;
}
.twc-btn--primary {
    background: var(--twc-accent);
    color: var(--twc-text-inverse);
}
.twc-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--twc-shadow);
    background: var(--twc-accent-hover);
    color: var(--twc-vibe);
}
.twc-btn--ghost {
    background: var(--twc-surface);
    border-color: var(--twc-border);
    color: var(--twc-text);
}
.twc-btn--ghost:hover {
    background: var(--twc-surface-hover);
}
.twc-btn--vibe {
    background: var(--twc-vibe);
    color: var(--twc-text);
}
.twc-btn--vibe:hover {
    background: var(--twc-vibe-deep);
    color: var(--twc-vibe);
}
.twc-btn--lg { padding: 0.95rem 1.5rem; font-size: var(--twc-text-base); }
.twc-btn--block { width: 100%; }

/* ── Form fields ─────────────────────────────────────────── */
.twc-field { display: flex; flex-direction: column; gap: var(--twc-space-2); margin-bottom: var(--twc-space-4); }
.twc-label {
    font-size: var(--twc-text-sm);
    font-weight: 700;
    color: var(--twc-text);
    display: flex;
    align-items: center;
    gap: var(--twc-space-2);
}
.twc-label--required::after {
    content: '*';
    color: var(--twc-error);
    font-weight: 700;
}
.twc-help {
    font-size: var(--twc-text-xs);
    color: var(--twc-text-muted);
}
.twc-input, .twc-textarea, .twc-select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--twc-surface);
    border: 1px solid var(--twc-border);
    border-radius: var(--twc-radius-sm);
    color: var(--twc-text);
    font-size: var(--twc-text-base);
    transition: border-color var(--twc-transition), box-shadow var(--twc-transition);
    min-height: 44px;
    outline: none;
}
.twc-input:focus, .twc-textarea:focus, .twc-select:focus {
    border-color: var(--twc-text);
    box-shadow: 0 0 0 3px var(--twc-vibe-soft);
}
.twc-textarea { resize: vertical; min-height: 96px; }

/* ── Card ────────────────────────────────────────────────── */
.twc-card {
    background: var(--twc-surface);
    border: 1px solid var(--twc-border);
    border-radius: var(--twc-radius-lg);
    padding: var(--twc-space-6);
    box-shadow: var(--twc-shadow-sm);
}

/* ── Alert / flash ───────────────────────────────────────── */
.twc-alert {
    padding: var(--twc-space-4);
    border-radius: var(--twc-radius);
    border: 1px solid var(--twc-border);
    background: var(--twc-surface);
    font-size: var(--twc-text-sm);
    margin-bottom: var(--twc-space-4);
    display: flex;
    gap: var(--twc-space-3);
    align-items: flex-start;
}
.twc-alert--success { background: var(--twc-success-light); border-color: var(--twc-success); color: #00513a; }
.twc-alert--error   { background: var(--twc-error-light);   border-color: var(--twc-error);   color: #802020; }
.twc-alert--info    { background: var(--twc-info-light);    border-color: var(--twc-info);    color: #1f5fb8; }

/* ── Tag / pill ──────────────────────────────────────────── */
.twc-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--twc-space-1);
    padding: 0.25rem 0.6rem;
    font-size: var(--twc-text-xs);
    font-weight: 700;
    background: var(--twc-vibe-soft);
    color: var(--twc-vibe-deep);
    border-radius: var(--twc-radius-full);
    line-height: 1.2;
}

/* ── Public-page header (Constitution §13.6 - public surface) ── */
.twc-public-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 247, 240, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--twc-transition);
}
.twc-public-header.scrolled { border-bottom-color: var(--twc-border); }
.twc-public-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--twc-space-3) var(--twc-space-4);
    max-width: var(--twc-content-width);
    margin: 0 auto;
    gap: var(--twc-space-3);
}
.twc-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--twc-space-2);
    font-family: var(--twc-font-display);
    font-weight: 700;
    font-size: var(--fs-18);
    letter-spacing: -0.02em;
    color: var(--twc-text);
}
.twc-brand img {
    width: 32px;
    height: 32px;
    border-radius: var(--twc-radius-sm);
}
.twc-public-nav { display: flex; align-items: center; gap: var(--twc-space-2); }
.twc-public-nav a {
    padding: 0.45rem 0.9rem;
    border-radius: var(--twc-radius-full);
    font-size: var(--twc-text-sm);
    font-weight: 700;
    color: var(--twc-text-secondary);
    transition: background var(--twc-transition), color var(--twc-transition);
}
.twc-public-nav a:hover { background: var(--twc-surface-hover); color: var(--twc-text); }
.twc-public-nav a.cta {
    background: var(--twc-accent);
    color: var(--twc-text-inverse);
}
.twc-public-nav a.cta:hover {
    background: var(--twc-accent-hover);
    color: var(--twc-vibe);
}
@media (max-width: 540px) {
    .twc-public-nav a.signin { display: none; }
}

/* ── App chrome (post-login) ─────────────────────────────── */
.twc-app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--twc-surface);
    border-bottom: 1px solid var(--twc-border);
    height: var(--twc-header-height);
}
.twc-app-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 var(--twc-space-4);
    max-width: var(--twc-content-width);
    margin: 0 auto;
}
.twc-app-main { padding: var(--twc-space-8) var(--twc-space-4); }

/* ── Utility ─────────────────────────────────────────────── */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.twc-stack > * + * { margin-top: var(--twc-space-4); }
.twc-stack-lg > * + * { margin-top: var(--twc-space-8); }
.twc-row { display: flex; gap: var(--twc-space-3); flex-wrap: wrap; }
.twc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--twc-space-4);
}
.twc-text-muted { color: var(--twc-text-muted); }
.twc-text-secondary { color: var(--twc-text-secondary); }