/* ============================================================
   Canva Easel Design System — Colors & Type
   Tokens extracted from base/tokens/primitive and base/tokens.
   ============================================================ */

/* ---- Fonts -----------------------------------------------
   Canva Sans is a variable font. "Canva Sans Display" is the SAME
   family — only font-variation-settings "opsz" switches between them:
     opsz 0   → body (Canva Sans)
     opsz 100 → display (Canva Sans Display) + ss02/ss03 stylistic sets
   Source: base/tokens/primitive/private/font_family.css
   ----------------------------------------------------------- */
@font-face {
  font-family: "Canva Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("./fonts/canva-sans-latin.woff2") format("woff2-variations"),
       url("./fonts/canva-sans-latin.woff2") format("woff2"),
       url("./fonts/canva-sans-latin.woff") format("woff");
  unicode-range: U+0020-007e, U+00a0, U+2013-2014, U+2018-201a, U+201c-201e, U+2020-2022, U+2026;
}
@font-face {
  font-family: "Canva Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("./fonts/canva-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024f;
}

:root {
  /* ===== Primitive Colors (from base/tokens/primitive/private/color.css) ===== */

  /* Brand purple */
  --colorPurple01: #F1EBFF;
  --colorPurple02: #E7DBFF;
  --colorPurple03: #D6C2FF;
  --colorPurple04: #BC97FC;
  --colorPurple05: #A370FC;
  --colorPurple06: #8B3DFF;   /* primary */
  --colorPurple07: #7630D7;
  --colorPurple08: #612DAE;
  --colorPurple09: #4A2E7E;
  --colorPurple10: #352459;

  /* Brand teal (gradient partner) */
  --colorTeal01: #BBF3F4;
  --colorTeal02: #00D9E1;
  --colorTeal03: #00C4CC;
  --colorTeal04: #00AFB5;

  /* Feedback — Green */
  --colorGreen01: #DDF4DD; --colorGreen02: #C3EAC4; --colorGreen03: #9FDBA0;
  --colorGreen04: #61BD62; --colorGreen05: #36A138; --colorGreen06: #008009;
  --colorGreen07: #096D11; --colorGreen08: #105B16; --colorGreen09: #16461A;
  --colorGreen10: #133416;

  /* Feedback — Red */
  --colorRed01: #FEE6E6; --colorRed02: #FFD6D8; --colorRed03: #FFB8BB;
  --colorRed04: #FF8088; --colorRed05: #FD4958; --colorRed06: #DB142C;
  --colorRed07: #B61629; --colorRed08: #911826; --colorRed09: #721D27;
  --colorRed10: #501B21;

  /* Feedback — Blue (info) */
  --colorBlue01: #E0EFFF; --colorBlue02: #CCE1FF; --colorBlue03: #A8CCFF;
  --colorBlue04: #6BA9FF; --colorBlue05: #3D8BFF; --colorBlue06: #1A62FF;
  --colorBlue07: #1854D7; --colorBlue08: #1846AA; --colorBlue09: #1D3B7C;
  --colorBlue10: #182C59;

  /* Feedback — Yellow (warn) */
  --colorYellow01: #FFEBD6; --colorYellow02: #FFD9AD; --colorYellow03: #FDBD68;
  --colorYellow04: #EC9809; --colorYellow05: #D17600; --colorYellow06: #AD5A00;
  --colorYellow07: #944F05; --colorYellow08: #75420B; --colorYellow09: #563715;
  --colorYellow10: #3E2A14;

  /* Neutral greys */
  --colorGrey01: #F3F4F7; --colorGrey02: #E8EAED; --colorGrey03: #DDDFE4;
  --colorGrey04: #C1C5CD; --colorGrey05: #8A8F99; --colorGrey06: #606671;
  --colorGrey07: #3E424C; --colorGrey08: #24262E; --colorGrey09: #1D1F26;
  --colorGrey10: #16171D;

  /* Alpha black — the correct way to tint neutral ink over any surface */
  --colorBlackA00: #0F101500;
  --colorBlackA01: #404F6D0F;
  --colorBlackA02: #39466024;
  --colorBlackA03: #35415A33;
  --colorBlackA04: #2B354A4D;
  --colorBlackA05: #242C3D66;
  --colorBlackA06: #1C213080;
  --colorBlackA07: #13162099;
  --colorBlackA08: #0F121AB2;
  --colorBlackA09: #0F1015D9;
  --colorBlackA10: #0F1015;

  /* Alpha white — mirror for dark surfaces */
  --colorWhiteA00: #FFFFFF00;
  --colorWhiteA01: #FFFFFF12;
  --colorWhiteA02: #FFFFFF26;
  --colorWhiteA03: #FFFFFF33;
  --colorWhiteA04: #FFFFFF4D;
  --colorWhiteA05: #FFFFFF66;
  --colorWhiteA06: #FFFFFF80;
  --colorWhiteA07: #FFFFFFB2;
  --colorWhiteA08: #FFFFFFCC;
  --colorWhiteA09: #FFFFFFE5;
  --colorWhiteA10: #FFFFFF;

  /* Alpha purple — selection, hint */
  --colorPurpleA01: #A370FC12;
  --colorPurpleA02: #A370FC26;
  --colorPurpleA03: #A370FC33;
  --colorPurpleA04: #A370FC4D;

  /* ===== Semantic tokens (light theme — the default) ===== */
  --colorActionPrimaryBg: var(--colorPurple06);
  --colorActionPrimaryBgHovered: var(--colorPurple07);
  --colorActionPrimaryBgPressed: var(--colorPurple08);
  --colorActionPrimaryFg: var(--colorWhiteA10);

  --colorActionSecondaryBg: var(--colorBlackA00);
  --colorActionSecondaryBgHovered: var(--colorBlackA01);
  --colorActionSecondaryBgPressed: var(--colorBlackA02);
  --colorActionSecondaryFg: var(--colorBlackA10);
  --colorActionSecondaryBorder: var(--colorBlackA03);

  --colorActionTertiaryBg: var(--colorBlackA00);
  --colorActionTertiaryBgHovered: var(--colorBlackA01);
  --colorActionTertiaryBgPressed: var(--colorBlackA02);
  --colorActionTertiaryFg: var(--colorBlackA10);

  --colorActionCriticalBg: var(--colorRed06);
  --colorActionCriticalBgHovered: var(--colorRed07);
  --colorActionCriticalBgPressed: var(--colorRed08);
  --colorActionCriticalFg: var(--colorWhiteA10);

  --colorActionSelectedBg: var(--colorPurpleA02);
  --colorActionSelectedBgHovered: var(--colorPurpleA02);
  --colorActionSelectedBgPressed: var(--colorPurpleA03);
  --colorActionSelectedFg: var(--colorPurple09);
  --colorActionSelectedBorder: var(--colorPurple06);

  --colorFeedbackPositiveBg: var(--colorGreen06);
  --colorFeedbackPositiveFg: var(--colorWhiteA10);
  --colorFeedbackPositiveSubtleBg: var(--colorGreen02);
  --colorFeedbackPositiveSubtleFg: var(--colorGreen10);

  --colorFeedbackInfoBg: var(--colorBlue06);
  --colorFeedbackInfoFg: var(--colorWhiteA10);
  --colorFeedbackInfoSubtleBg: var(--colorBlue02);
  --colorFeedbackInfoSubtleFg: var(--colorBlue10);

  --colorFeedbackWarnBg: var(--colorYellow06);
  --colorFeedbackWarnFg: var(--colorWhiteA10);
  --colorFeedbackWarnSubtleBg: var(--colorYellow02);
  --colorFeedbackWarnSubtleFg: var(--colorYellow10);

  --colorFeedbackCriticalBg: var(--colorRed06);
  --colorFeedbackCriticalFg: var(--colorWhiteA10);
  --colorFeedbackCriticalSubtleBg: var(--colorRed02);
  --colorFeedbackCriticalSubtleFg: var(--colorRed10);

  --colorFeedbackHintBg: var(--colorPurple06);
  --colorFeedbackHintFg: var(--colorWhiteA10);
  --colorFeedbackHintSubtleBg: var(--colorPurple02);
  --colorFeedbackHintSubtleFg: var(--colorPurple10);

  /* Content (foreground text/icons) */
  --colorContentFg: var(--colorBlackA10);
  --colorContentSubtleFg: var(--colorBlackA09);
  --colorContentSubtlestFg: var(--colorBlackA08);
  --colorContentPlaceholderFg: var(--colorBlackA07);
  --colorContentCriticalFg: var(--colorRed06);
  --colorContentPositiveFg: var(--colorGreen06);
  --colorContentInfoFg: var(--colorBlue06);
  --colorContentWarnFg: var(--colorYellow06);

  --colorLinkFg: var(--colorPurple06);
  --colorLinkFgHovered: var(--colorPurple07);
  --colorLinkFgPressed: var(--colorPurple08);

  /* UI chrome */
  --colorUiBorder: var(--colorBlackA02);
  --colorUiBorderFocused: var(--colorBlue05);
  --colorUiNeutralBg: var(--colorBlackA02);
  --colorUiNeutralSubtleBg: var(--colorBlackA01);
  --colorUiNeutralStrongBg: var(--colorBlackA03);
  --colorUiNeutralStrongestBg: var(--colorBlackA05);
  --colorUiOverlayBg: var(--colorBlackA05);

  --colorControlBg: var(--colorWhiteA10);
  --colorControlBorder: var(--colorBlackA03);
  --colorControlBorderHovered: var(--colorBlackA06);
  --colorControlBorderFocused: var(--colorPurple06);
  --colorControlCriticalBorder: var(--colorRed06);
  --colorControlSelectedBg: var(--colorPurple06);
  --colorControlSelectedFg: var(--colorWhiteA10);
  --colorControlSelectedBorder: var(--colorPurple06);

  /* Elevation surfaces (light) */
  --elevationSurfaceSunkenBg: var(--colorGrey01);
  --elevationSurfaceBg: var(--colorWhiteA10);
  --elevationSurfaceRaisedBg: var(--colorWhiteA10);
  --elevationSurfaceFloatingBg: var(--colorWhiteA10);
  --elevationHandleRaisedShadow:
    0px 0px 0px 0.5px var(--colorBlackA01),
    0px 1px 2px 0px rgba(24,44,89,0.14),
    0px 2px 4px 0px rgba(24,44,89,0.14);
  --elevationSurfaceRaisedShadow:
    0px 0px 0px 0.5px var(--colorBlackA01),
    0px 2px 4px 0px rgba(24,44,89,0.14),
    0px 6px 12px 0px rgba(24,44,89,0.07);
  --elevationSurfaceFloatingShadow:
    0px 0px 0px 0.5px var(--colorBlackA01),
    0px 8px 16px 0px rgba(24,44,89,0.14),
    0px 24px 24px 0px rgba(24,44,89,0.07);

  /* Brand gradients */
  --gradientBrandHorizontalBg: linear-gradient(90deg, #00C4CC, #7D2AE8);
  --gradientBrandDiagonalBg: linear-gradient(135deg, #00C4CC, #7D2AE8);
  --gradientBrandDiagonalFg: linear-gradient(135deg, #03A5AB, #7D2AE8);
  --gradientBrandVerticalSubtleBg: linear-gradient(180deg, #F9F5FE, #F5FFFF);

  /* ===== Radius tokens ===== */
  --radius04: 4px; --radius06: 6px; --radius08: 8px; --radius10: 10px;
  --radius12: 12px; --radius14: 14px; --radius16: 16px; --radius20: 20px;
  --radius24: 24px; --radius32: 32px; --radiusFull: 9999px;

  --radiusElementSharpest: var(--radius06);
  --radiusElementSharp: var(--radius04);
  --radiusElementStandard: var(--radius08);   /* buttons, inputs */
  --radiusElementSoft: var(--radius12);       /* large cards */
  --radiusElementSoftest: var(--radius16);
  --radiusElementRound: var(--radiusFull);

  --radiusContainerSharp: var(--radius12);
  --radiusContainerStandard: var(--radius12); /* popovers, toasts */
  --radiusContainerSoft: var(--radius16);     /* dialogs, sheets */
  --radiusContainerSoftest: var(--radius24);

  /* ===== Spacing (8px base unit) ===== */
  --space0: 0px;    --space025: 2px;  --space050: 4px;  --space100: 8px;
  --space150: 12px; --space200: 16px; --space300: 24px; --space400: 32px;
  --space600: 48px; --space800: 64px; --space1200: 96px;

  /* ===== Typography primitives ===== */
  --fontFamilySans: "Canva Sans", "Noto Sans Variable", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Display is the same family — switch via font-variation-settings on the element. */
  --fontFamilyDisplay: "Canva Sans", "Noto Sans Variable", "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --fontFamilyMono: Menlo, Consolas, "SF Mono", "Liberation Mono", monospace;

  /* Apply this to elements that should render as Canva Sans Display. */
  --fontVariationSettingsDisplay: "opsz" 100;
  --fontFeatureSettingsDisplay: "ss02", "ss03";
  --fontVariationSettingsBody: "opsz" 0;

  --fontWeight400: 400; --fontWeight500: 500; --fontWeight600: 600; --fontWeight700: 700;

  --letterSpacingCompact: -0.01em;
  --letterSpacingStandard: 0;
  --letterSpacingSpacious: 0.02em;

  /* ===== Typography scale — desktop default (values from base/tokens/private/typography.css) ===== */
  /* Display — Canva Sans Display, 400 weight, compact letter-spacing */
  --typeDisplayXLargeSize: 42px;  --typeDisplayXLargeLh: 1.1;
  --typeDisplayLargeSize:  36px;  --typeDisplayLargeLh: 1.1;
  --typeDisplayMediumSize: 36px;  --typeDisplayMediumLh: 1.1;
  --typeDisplaySmallSize:  32px;  --typeDisplaySmallLh: 1.1;
  --typeDisplayXSmallSize: 32px;  --typeDisplayXSmallLh: 1.25;

  /* Title */
  --typeTitleXLargeSize:  36px;   --typeTitleXLargeLh: 1.25;  --typeTitleXLargeWt: 500;
  --typeTitleLargeSize:   24px;   --typeTitleLargeLh: 1.25;   --typeTitleLargeWt: 600;
  --typeTitleMediumSize:  21px;   --typeTitleMediumLh: 26px;  --typeTitleMediumWt: 600;
  --typeTitleSmallSize:   16px;   --typeTitleSmallLh: 24px;   --typeTitleSmallWt: 600;
  --typeTitleXSmallSize:  14px;   --typeTitleXSmallLh: 20px;  --typeTitleXSmallWt: 700;
  --typeTitleXxSmallSize: 12px;   --typeTitleXxSmallLh: 18px; --typeTitleXxSmallWt: 600;

  /* Body */
  --typeBodyXxLargeSize: 21px;  --typeBodyXxLargeLh: 1.5;
  --typeBodyXLargeSize:  18px;  --typeBodyXLargeLh: 1.5;
  --typeBodyLargeSize:   16px;  --typeBodyLargeLh: 24px;
  --typeBodyMediumSize:  14px;  --typeBodyMediumLh: 22px; /* default body */
  --typeBodySmallSize:   12px;  --typeBodySmallLh: 20px;
  --typeBodyXSmallSize:  11px;  --typeBodyXSmallLh: 16px;
}

/* ===== Dark theme (apply [data-theme="dark"] to root) ===== */
[data-theme="dark"] {
  --colorActionSecondaryBg: var(--colorWhiteA00);
  --colorActionSecondaryBgHovered: var(--colorWhiteA01);
  --colorActionSecondaryBgPressed: var(--colorWhiteA02);
  --colorActionSecondaryFg: var(--colorWhiteA10);
  --colorActionSecondaryBorder: var(--colorWhiteA03);
  --colorActionTertiaryFg: var(--colorWhiteA10);
  --colorActionSelectedBg: var(--colorPurpleA04);

  --colorContentFg: var(--colorWhiteA09);
  --colorContentSubtleFg: var(--colorWhiteA08);
  --colorContentSubtlestFg: var(--colorWhiteA07);
  --colorContentPlaceholderFg: var(--colorWhiteA06);
  --colorContentCriticalFg: var(--colorRed05);
  --colorContentPositiveFg: var(--colorGreen05);
  --colorContentInfoFg: var(--colorBlue05);
  --colorContentWarnFg: var(--colorYellow05);

  --colorLinkFg: var(--colorPurple05);

  --colorUiBorder: var(--colorWhiteA02);
  --colorUiNeutralBg: var(--colorWhiteA02);
  --colorUiNeutralSubtleBg: var(--colorWhiteA01);
  --colorUiOverlayBg: var(--colorBlackA07);

  --colorControlBg: var(--colorBlackA10);
  --colorControlBorder: var(--colorWhiteA03);

  --elevationSurfaceSunkenBg: var(--colorBlackA10);
  --elevationSurfaceBg: var(--colorGrey10);
  --elevationSurfaceRaisedBg: var(--colorGrey09);
  --elevationSurfaceFloatingBg: var(--colorGrey08);
}

/* ============================================================
   Semantic type classes — apply directly to elements
   ============================================================ */
html, body {
  font-family: var(--fontFamilySans);
  font-variation-settings: var(--fontVariationSettingsBody);
  color: var(--colorContentFg);
  background: var(--elevationSurfaceBg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Utility: apply to any element to render as Canva Sans Display. */
.display, [class*="display-"], [class*="title-"]:not(.title-small):not(.title-xsmall):not(h4):not(h5) {
  font-variation-settings: var(--fontVariationSettingsDisplay);
  font-feature-settings: var(--fontFeatureSettingsDisplay);
}

.display-xlarge, h1.display {
  font-family: var(--fontFamilyDisplay); font-weight: 400;
  font-size: var(--typeDisplayXLargeSize); line-height: var(--typeDisplayXLargeLh);
  letter-spacing: var(--letterSpacingCompact); margin: 0;
}
.display-large { font-family: var(--fontFamilyDisplay); font-weight: 400;
  font-size: var(--typeDisplayLargeSize); line-height: var(--typeDisplayLargeLh);
  letter-spacing: var(--letterSpacingCompact); margin: 0; }
.display-medium { font-family: var(--fontFamilyDisplay); font-weight: 400;
  font-size: var(--typeDisplayMediumSize); line-height: var(--typeDisplayMediumLh);
  letter-spacing: var(--letterSpacingCompact); margin: 0; }
.display-small { font-family: var(--fontFamilyDisplay); font-weight: 400;
  font-size: var(--typeDisplaySmallSize); line-height: var(--typeDisplaySmallLh);
  letter-spacing: var(--letterSpacingCompact); margin: 0; }

.title-xlarge, h1 { font-family: var(--fontFamilyDisplay); font-weight: 500;
  font-size: var(--typeTitleXLargeSize); line-height: var(--typeTitleXLargeLh); margin: 0; }
.title-large, h2 { font-family: var(--fontFamilyDisplay); font-weight: 600;
  font-size: var(--typeTitleLargeSize); line-height: var(--typeTitleLargeLh); margin: 0; }
.title-medium, h3 { font-family: var(--fontFamilyDisplay); font-weight: 600;
  font-size: var(--typeTitleMediumSize); line-height: var(--typeTitleMediumLh); margin: 0; }
.title-small, h4 { font-family: var(--fontFamilySans); font-weight: 600;
  font-size: var(--typeTitleSmallSize); line-height: var(--typeTitleSmallLh); margin: 0; }
.title-xsmall, h5 { font-family: var(--fontFamilySans); font-weight: 700;
  font-size: var(--typeTitleXSmallSize); line-height: var(--typeTitleXSmallLh); margin: 0; }

.body-xxlarge { font-family: var(--fontFamilySans); font-weight: 400;
  font-size: var(--typeBodyXxLargeSize); line-height: var(--typeBodyXxLargeLh); }
.body-xlarge { font-family: var(--fontFamilySans); font-weight: 400;
  font-size: var(--typeBodyXLargeSize); line-height: var(--typeBodyXLargeLh); }
.body-large { font-family: var(--fontFamilySans); font-weight: 400;
  font-size: var(--typeBodyLargeSize); line-height: var(--typeBodyLargeLh); }
.body-medium, p, body { font-family: var(--fontFamilySans); font-weight: 400;
  font-size: var(--typeBodyMediumSize); line-height: var(--typeBodyMediumLh); }
.body-small { font-family: var(--fontFamilySans); font-weight: 400;
  font-size: var(--typeBodySmallSize); line-height: var(--typeBodySmallLh); }
.body-xsmall { font-family: var(--fontFamilySans); font-weight: 600;
  font-size: var(--typeBodyXSmallSize); line-height: var(--typeBodyXSmallLh);
  letter-spacing: var(--letterSpacingSpacious); }

code, .mono { font-family: var(--fontFamilyMono); font-size: 12px; }
a { color: var(--colorLinkFg); text-decoration: none; }
a:hover { color: var(--colorLinkFgHovered); text-decoration: underline; }