/* =============================================================
   The Ticketing Co — Design Tokens
   Sampled from the Organizer app (Event Details, dark theme).
   ============================================================= */

/* ---------- Brand fonts + web font fallbacks ---------- */
/* Display face is Oswald Bold (Google Fonts).
   Stack Sans Headline kept as a local fallback for legacy references. */
@font-face {
  font-family: 'Stack Sans Headline';
  src: url('../fonts/StackSansHeadline-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/StackSansHeadline-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("25a84ece-e89c-43dd-91f7-551f0b7dbdd3") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("deb51307-c3d2-414e-8935-9bcac83212d6") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("25a84ece-e89c-43dd-91f7-551f0b7dbdd3") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("deb51307-c3d2-414e-8935-9bcac83212d6") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("25a84ece-e89c-43dd-91f7-551f0b7dbdd3") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("deb51307-c3d2-414e-8935-9bcac83212d6") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("25a84ece-e89c-43dd-91f7-551f0b7dbdd3") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("deb51307-c3d2-414e-8935-9bcac83212d6") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2282b990-abe5-4a20-ba7d-9119cfe30e14") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2e65d0bc-87bd-4159-aee4-6cc938061a11") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("991cdb7b-92d3-47b1-bf8b-16a6a8854eed") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("adc9c1d3-71f3-4e94-8735-d0c67581551a") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("524deb10-5d4d-45b2-9f6a-2e42435db970") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("199c391c-0aa6-4b9f-a2e8-2187e4f996d5") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("2282b990-abe5-4a20-ba7d-9119cfe30e14") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("2e65d0bc-87bd-4159-aee4-6cc938061a11") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("991cdb7b-92d3-47b1-bf8b-16a6a8854eed") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("adc9c1d3-71f3-4e94-8735-d0c67581551a") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("524deb10-5d4d-45b2-9f6a-2e42435db970") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("199c391c-0aa6-4b9f-a2e8-2187e4f996d5") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("a62a7703-0328-4ae4-b7ff-366ba1e0f2e1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("edcd6071-1310-4f36-9e43-f1ff7a895c65") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("f6147a14-94c9-408c-abf6-804079ee966d") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("1219e109-25d1-4435-a958-1782d88b24f8") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("78fb3765-7cd1-4eb0-9d5a-fe82717b5070") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("a62a7703-0328-4ae4-b7ff-366ba1e0f2e1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("edcd6071-1310-4f36-9e43-f1ff7a895c65") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("f6147a14-94c9-408c-abf6-804079ee966d") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("1219e109-25d1-4435-a958-1782d88b24f8") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("78fb3765-7cd1-4eb0-9d5a-fe82717b5070") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("a62a7703-0328-4ae4-b7ff-366ba1e0f2e1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("edcd6071-1310-4f36-9e43-f1ff7a895c65") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("f6147a14-94c9-408c-abf6-804079ee966d") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("1219e109-25d1-4435-a958-1782d88b24f8") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("78fb3765-7cd1-4eb0-9d5a-fe82717b5070") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* ===== Color — base palette ===== */
  /* The brand's signature "eerie black" — a warm, slightly-brown near-black.
     Every surface in the organizer app uses it. */
  --tc-black:           #231F20;
  --tc-black-elevated:  #2C2829;  /* +5% L for inset cards, tab bar on dark */
  --tc-black-sunken:    #1A1717;  /* -5% L for recessed surfaces */

  /* The periwinkle accent — NOT a pure blue. Muted, slightly lavender.
     Used for primary action cards and active nav state. */
  --tc-blue-500:        #6184C3;  /* primary */
  --tc-blue-400:        #7A99D0;  /* hover on dark */
  --tc-blue-600:        #4E6FAE;  /* pressed */
  --tc-blue-100:        #E4EAF4;  /* tint — subtle backgrounds */

  /* Neutrals — true whites + warm-cool grey ramp */
  --tc-white:           #FFFFFF;
  --tc-grey-100:        #F4F3F3;
  --tc-grey-300:        #C9C5C6;
  --tc-grey-500:        #8E8889;
  --tc-grey-700:        #5B5658;
  --tc-grey-900:        #383334;

  /* Semantic — event-energy coded. Slightly desaturated to sit on dark bg. */
  --tc-green:           #4AB36B;  /* checked-in, success */
  --tc-amber:           #E8A94A;  /* warning, in-progress */
  --tc-red:             #D9534F;  /* error, destructive, void */
  --tc-violet:          #8E6DC2;  /* secondary accent — sparingly */

  /* ===== Semantic color tokens (dark theme default) ===== */
  --bg:                 var(--tc-black);
  --bg-elevated:        var(--tc-black-elevated);
  --bg-sunken:          var(--tc-black-sunken);
  --fg-1:               var(--tc-white);          /* primary text */
  --fg-2:               var(--tc-grey-300);       /* secondary text */
  --fg-3:               var(--tc-grey-500);       /* tertiary / hint */
  --fg-on-accent:       var(--tc-white);
  --border:             rgba(255,255,255,0.08);
  --border-strong:      rgba(255,255,255,0.16);
  --accent:             var(--tc-blue-500);
  --accent-hover:       var(--tc-blue-400);
  --accent-pressed:     var(--tc-blue-600);
  --overlay-scrim:      rgba(35,31,32,0.72);

  /* ===== Typography ===== */
  /* Display face — Oswald Bold. Condensed, heavy, uppercase-friendly.
     Use weight 700 by default for headlines, titles, and button labels. */
  --font-display:       'Oswald', 'Stack Sans Headline', 'Barlow Condensed', 'Impact', sans-serif;
  --fw-display:         700;  /* Oswald Bold */
  /* Body face — humanist geometric sans, easy to read at small sizes. */
  --font-body:          'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:          'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Type scale — mobile-first. All display sizes assume uppercase + tight tracking. */
  --fs-display-xl:      40px;   /* hero titles, event names */
  --fs-display-lg:      28px;   /* screen titles in headers, section starters */
  --fs-display-md:      22px;   /* card headings, modal titles */
  --fs-display-sm:      18px;   /* overline-style section labels */

  --fs-body-lg:         17px;
  --fs-body:            15px;
  --fs-body-sm:         13px;
  --fs-caption:         11px;

  --lh-tight:           1.05;
  --lh-snug:            1.22;
  --lh-normal:          1.45;
  --lh-loose:           1.6;

  --tracking-display:   -0.01em; /* slight negative for condensed caps */
  --tracking-overline:  0.08em;
  --tracking-body:      0;

  /* ===== Spacing (4pt grid) ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ===== Radii ===== */
  --radius-sm:   6px;
  --radius-md:   10px;   /* default — matches the reference action cards */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ===== Shadows — subtle on dark, mostly for elevation on tint ===== */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.45);
  --shadow-glow-accent: 0 0 0 3px rgba(97,132,195,0.35); /* focus ring */

  /* ===== Motion ===== */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
}

/* =============================================================
   Semantic element styles — include this file and use classes
   like .tc-h1 / .tc-body. Keeps elements untouched unless opted in.
   ============================================================= */

.tc-surface        { background: var(--bg); color: var(--fg-1); font-family: var(--font-body); }

.tc-display-xl,
.tc-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
}

.tc-display-lg,
.tc-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
}

.tc-display-md,
.tc-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-md);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--fg-1);
}

.tc-overline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-2);
}

.tc-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.tc-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.tc-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.tc-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.tc-code,
.tc-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--fg-1);
}

/* Utility */
.tc-focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow-accent);
}