/* ============================================================================
 * PDing — Design tokens
 * Sourced from pd-ing/pding-fe  →  tailwind.config.ts + app/globals.css
 * ============================================================================ */
@import url("./fonts/pretendard.css");

:root {
  /* ------------------------------------------------------------------------
   * BRAND
   * Purple + pink gradient is the single strongest brand signature. It shows
   * up on every CTA, the logo wordmark, badges, active states and accents.
   * ------------------------------------------------------------------------ */
  --pd-purple:            #7541EA;  /* tailwind `purple`         — primary */
  --pd-purple-gradient-a: #7542EA;  /* gradient start             */
  --pd-purple-gradient-b: #EA426A;  /* gradient end — hot pink    */
  --pd-purple-light:      #A889EF;  /* tailwind `lightPurple`    — hover / soft */
  --pd-purple-lighter:    #432D77;
  --pd-purple-dark:       #261B3F;  /* dark panel purple         */
  --pd-purple-darker:     #1C1725;  /* app background purple     */
  --pd-purple-border:     #302051;  /* subtle dark dividers      */

  --pd-gradient-pd: linear-gradient(to right, #7542EA, #EA426A);
  --pd-gradient-pd-guide: linear-gradient(90deg, #7542EA 0%, #EA426A 100%);
  --pd-gradient-service: linear-gradient(to right, #EDEEF6, #7E83BD);
  --pd-gradient-skeleton-light:  linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  --pd-gradient-skeleton-mobile: linear-gradient(90deg, transparent, rgba(120,120,120,0.7), transparent);

  /* ------------------------------------------------------------------------
   * DARK BASE  (app chrome — native dark palette, NOT a toggle)
   * The mobile app, watch page and login landing are always dark.
   * Desktop surfaces switch to white with dark text.
   * ------------------------------------------------------------------------ */
  --pd-bg-deepest:     #0D0916;  /* `darkBlue`       — html/body bg          */
  --pd-bg-dark:        #120C1F;  /* `darkLightBlue`  — main dark surface     */
  --pd-bg-elev-1:      #1C1728;  /* `lightBlue`      — cards, rows           */
  --pd-bg-elev-2:      #261B3F;
  --pd-border-dark:    #302051;

  /* ------------------------------------------------------------------------
   * LIGHT BASE (desktop web)
   * ------------------------------------------------------------------------ */
  --pd-bg-white:       #FFFFFF;
  --pd-bg-ghost:       #F8F8F8;  /* `ghostWhite`   */
  --pd-bg-off:         #F6F6F6;  /* `midGray`      */
  --pd-bg-cream:       #F8F5F2;  /* `middleGray`   */
  --pd-bg-subtle:      #F4F4F4;
  --pd-bg-icon:        #F1F1F1;  /* `lightYellow` — used as icon-button fill */
  --pd-bg-frosted:     #D6E1F1;  /* `frostedBlue`  */
  --pd-bg-lavender:    #F2F5FF;  /* `lighterBlue`  */

  /* ------------------------------------------------------------------------
   * NEUTRALS (grayscale ladder)
   * ------------------------------------------------------------------------ */
  --pd-black:          #000000;
  --pd-jet:            #111111;  /* `jetBlack`    */
  --pd-ink:            #222222;  /* `lightBlack`     — body text on light  */
  --pd-darkgray:       #252728;
  --pd-gray-500:       #444444;  /* `lighterBlack` */
  --pd-gray-400:       #878787;  /* `lighterGrey`  */
  --pd-gray-350:       #888888;  /* `lightGray`    */
  --pd-gray-300:       #CACAC9;  /* `lightOrange` — yes, really named this */
  --pd-gray-250:       #CCCCCC;  /* `lightWhite`  */
  --pd-gray-200:       #D9D9D9;  /* `lighterGrey` (yes two of them)        */
  --pd-gray-180:       #DDDDDD;  /* `grayDD`      */
  --pd-gray-150:       #E4E4E4;
  --pd-gray-100:       #EEEEEE;  /* `grayEE`      */
  --pd-white:          #FFFFFF;

  /* ------------------------------------------------------------------------
   * SEMANTIC
   * ------------------------------------------------------------------------ */
  --pd-positive:       #00FF23;  /* `neonGreen` — "live" dot, success tag */
  --pd-warn:           #FF9900;  /* `orangeYellow` */
  --pd-danger:         #EA426A;  /* hot pink is brand AND error/like color */
  --pd-danger-soft:    #FF6058;  /* `lightRed`  */
  --pd-info:           #0068FE;  /* `neonBlue` */
  --pd-sky:            #2CA8FE;  /* `skyBlue`  */
  --pd-blue-mid:       #414FF1;  /* `midBlue`  */
  --pd-blue-dark:      #4441E8;  /* `darkerBlue` */
  --pd-yellow:         #FFFB9C;  /* `lemonMeringue` */
  --pd-violet-soft:    #EFADFF;  /* `lavenderDream` */
  --pd-steel:          #7191BF;  /* `steelBlue`  */

  /* ------------------------------------------------------------------------
   * TEXT ROLES
   * ------------------------------------------------------------------------ */
  --pd-fg:             var(--pd-ink);       /* default body, on light */
  --pd-fg-muted:       var(--pd-gray-350);  /* secondary / helper     */
  --pd-fg-subtle:      var(--pd-gray-300);  /* meta / timestamps       */
  --pd-fg-on-dark:     var(--pd-white);     /* body on dark surface   */
  --pd-fg-on-dark-mu:  #A1A1AA;             /* "lightGray" on dark    */
  --pd-fg-link:        var(--pd-purple);
  --pd-fg-link-hover:  var(--pd-purple-light);

  /* ------------------------------------------------------------------------
   * TYPOGRAPHY
   * Pretendard is a Korean-optimised geometric sans, used at every weight
   * from 400 → 800. No serifs, no monospace in product UI.
   * ------------------------------------------------------------------------ */
  --pd-font-sans: "Pretendard Variable", Pretendard,
                  -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Noto Sans KR",
                  "Malgun Gothic", "Apple SD Gothic Neo",
                  sans-serif;

  /* Scale — derived from the codebase's tailwind-default usage.
     The landing hero uses text-[90px] desktop / text-[50px] mobile.
     Body copy is text-base (16px); meta / chip text is text-xs (12px). */
  --pd-text-xs:        12px;   /* timestamps, chips, counters           */
  --pd-text-sm:        14px;   /* default on mobile, secondary on web   */
  --pd-text-base:      16px;   /* body default                          */
  --pd-text-lg:        18px;   /* large body, list titles               */
  --pd-text-xl:        20px;
  --pd-text-2xl:       24px;
  --pd-text-3xl:       30px;
  --pd-text-4xl:       36px;
  --pd-display-sm:     50px;   /* mobile hero  */
  --pd-display-lg:     90px;   /* desktop hero */

  /* Weights actually shipped in production */
  --pd-w-regular:      400;
  --pd-w-medium:       500;
  --pd-w-semibold:     600;
  --pd-w-bold:         700;
  --pd-w-extrabold:    800;

  /* Leading — the hero uses leading-tight; body uses browser default */
  --pd-leading-tight:  1.1;
  --pd-leading-snug:   1.3;
  --pd-leading-normal: 1.5;

  /* ------------------------------------------------------------------------
   * RADII
   * PDing leans on fully-rounded pill shapes for primary CTAs, 8–12px for
   * cards, and 4–5px for dense UI (badges, list rows).
   * ------------------------------------------------------------------------ */
  --pd-radius-xs:      4px;
  --pd-radius-sm:      6px;
  --pd-radius-md:      8px;
  --pd-radius-lg:      12px;
  --pd-radius-xl:      16px;
  --pd-radius-2xl:     20px;
  --pd-radius-pill:    9999px;

  /* ------------------------------------------------------------------------
   * SHADOW & ELEVATION
   * Not a heavy shadow-first design — most panels use borders instead.
   * The sidebar uses shadow-sm; modals use a soft drop.
   * ------------------------------------------------------------------------ */
  --pd-shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --pd-shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --pd-shadow-lg:  0 12px 32px rgba(0,0,0,0.18);
  --pd-shadow-brand: 0 8px 24px rgba(117,65,234,0.35); /* glow for CTAs  */
  --pd-text-shadow-cta: 0 4px 4px rgba(0,0,0,0.20);    /* ripped verbatim
    from the hero sign-up / contact buttons in BannerCarousel.tsx */

  /* ------------------------------------------------------------------------
   * SPACING — 4-pt grid (matches tailwind defaults the product uses)
   * ------------------------------------------------------------------------ */
  --pd-space-1:  4px;
  --pd-space-2:  8px;
  --pd-space-3:  12px;
  --pd-space-4:  16px;
  --pd-space-5:  20px;
  --pd-space-6:  24px;
  --pd-space-8:  32px;
  --pd-space-10: 40px;
  --pd-space-12: 48px;
  --pd-space-16: 64px;

  /* Sidebar & layout constants found in code */
  --pd-sidebar-w:  18rem;  /* lg:w-[18rem] from UserleftPanel.tsx */
  --pd-topbar-h:   56px;

  /* ------------------------------------------------------------------------
   * MOTION
   * The system is animation-heavy: marquee scrolls on the landing, slide-up
   * on modals, spring follow button, skeleton shimmer, bounce on like.
   * Timings are directly from tailwind.config.ts → animation{}.
   * ------------------------------------------------------------------------ */
  --pd-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* slideRight, slideLeft */
  --pd-ease-out:      ease-out;
  --pd-ease-in-out:   ease-in-out;
  --pd-dur-instant:   200ms;   /* dropUp   */
  --pd-dur-fast:      300ms;   /* dropDown, slideUpModal */
  --pd-dur-base:      400ms;   /* slideRight/Left, shake-bottom, etc. */
  --pd-dur-slow:      600ms;   /* quickFadeIn */
  --pd-dur-marquee:   30s;     /* linear infinite */
}

/* ============================================================================
 * SEMANTIC ROLES
 * Use these in components; they adapt if we ever add a theme swap.
 * ============================================================================ */
:root {
  --color-bg:           var(--pd-bg-dark);    /* app default is DARK */
  --color-bg-elev:      var(--pd-bg-elev-1);
  --color-surface:      var(--pd-white);      /* desktop web surface */
  --color-surface-alt:  var(--pd-bg-ghost);
  --color-border:       var(--pd-gray-180);
  --color-border-dark:  var(--pd-border-dark);
  --color-text:         var(--pd-fg);
  --color-text-muted:   var(--pd-fg-muted);
  --color-text-on-dark: var(--pd-white);
  --color-primary:      var(--pd-purple);
  --color-primary-soft: var(--pd-purple-light);
  --color-accent:       var(--pd-purple-gradient-b);
}

/* ============================================================================
 * TYPE STYLES  — ready-to-apply classes
 * ============================================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--pd-font-sans);
  font-weight: var(--pd-w-regular);
  font-size:   var(--pd-text-base);
  line-height: var(--pd-leading-normal);
  color:       var(--pd-fg);
}

.pd-display   { font-size: var(--pd-display-lg); font-weight: var(--pd-w-bold); line-height: var(--pd-leading-tight); letter-spacing: -0.02em; }
.pd-display-sm{ font-size: var(--pd-display-sm); font-weight: var(--pd-w-bold); line-height: var(--pd-leading-tight); letter-spacing: -0.02em; }
.pd-h1        { font-size: var(--pd-text-4xl);   font-weight: var(--pd-w-bold); line-height: var(--pd-leading-tight); }
.pd-h2        { font-size: var(--pd-text-3xl);   font-weight: var(--pd-w-bold); line-height: var(--pd-leading-snug); }
.pd-h3        { font-size: var(--pd-text-2xl);   font-weight: var(--pd-w-bold); line-height: var(--pd-leading-snug); }
.pd-h4        { font-size: var(--pd-text-xl);    font-weight: var(--pd-w-semibold); }
.pd-body-lg   { font-size: var(--pd-text-lg);    font-weight: var(--pd-w-regular); }
.pd-body      { font-size: var(--pd-text-base);  font-weight: var(--pd-w-regular); }
.pd-body-strong{font-size: var(--pd-text-base);  font-weight: var(--pd-w-bold); }
.pd-meta      { font-size: var(--pd-text-sm);    font-weight: var(--pd-w-regular); color: var(--pd-fg-muted); }
.pd-caption   { font-size: var(--pd-text-xs);    font-weight: var(--pd-w-medium); color: var(--pd-fg-muted); }
.pd-caps      { font-size: var(--pd-text-xs);    font-weight: var(--pd-w-bold); text-transform: uppercase; letter-spacing: 0.04em; }

/* Gradient text — used in the logo wordmark and brand-emphasis copy */
.pd-gradient-text {
  background: var(--pd-gradient-pd);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ============================================================================
 * KEYFRAMES — copied from tailwind.config.ts keyframes
 * ============================================================================ */
@keyframes pd-slide-up    { from { transform: translateY(552px); } to { transform: translateY(0); } }
@keyframes pd-slide-down  { from { transform: translateY(-552px);} to { transform: translateY(0); } }
@keyframes pd-marquee     { from { transform: translateX(0); }    to { transform: translateX(-100%); } }
@keyframes pd-skeleton    { 0% { transform: translateX(-100%); } 50%,100% { transform: translateX(100%); } }
@keyframes pd-fade-in     { from { opacity: 0; } to { opacity: 1; } }
@keyframes pd-drop-down   { from { opacity: 0; transform: translateY(-32px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pd-scale-up    { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes pd-shake       { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(5deg); } }